我看到一些新网站在他们的网站上使用自定义字体(除了常规的 Arial、Tahoma 等)。
他们支持大量的浏览器。
如何做到这一点?如果可能的话,同时还阻止人们免费下载字体。
cufon
这样的 javascript 替换
通常,您可以在 CSS 中通过 @font-face
使用自定义字体。这是一个非常基本的示例:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
然后,微不足道地,在特定元素上使用字体:
.classname {
font-family: 'YourFontName';
}
(.classname
是您的选择器)。
请注意,某些字体格式不适用于所有浏览器;您可以使用 fontsquirrel.com 的生成器来避免转换过于费力。
您可以找到 Google Fonts 提供的一组不错的免费网络字体(还具有自动生成的 CSS @font-face
规则,因此您不必自己编写)。
同时还阻止人们免费下载字体,如果可能的话
不,不可能使用通过 CSS 嵌入的自定义字体来设置文本样式,同时阻止人们下载它。您需要使用图片、Flash 或 HTML5 Canvas,所有这些都不是很实用。
要确保您的字体跨浏览器兼容,请确保使用以下语法:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
取自 here。
您必须下载字体文件并将其加载到您的 CSS 中。
Fe 我在我的 Web 应用程序中使用 Yanone Kaffeesatz 字体。
我通过加载和使用它
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
在我的样式表中。
如今,网络上使用了四种字体容器格式:EOT, TTF, WOFF,
和WOFF2.
不幸的是,尽管选择范围很广,但没有一种通用格式适用于所有新旧浏览器:
EOT 只是 IE,
TTF 有部分 IE 支持,
WOFF 享有最广泛的支持,但在某些较旧的浏览器中不可用
WOFF 2.0 支持是许多浏览器正在进行的工作。
如果您希望您的 Web 应用程序在所有浏览器中使用相同的字体,那么您可能希望在 CSS 中提供所有 4 种字体类型
@font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
#iefix
有什么用?而这部分 font-family: 'besom'; !important
,!important
在 ;
之外?
如果您在 Google.com/webfonts 或 fontsquirrel.com 上找不到任何您喜欢的字体,您可以随时使用您制作的字体制作您自己的网络字体。
这是一个很好的教程:Make your own font face web font kit
尽管我不确定是否要阻止某人下载您的字体。
希望这可以帮助,
我正在开发 Win 8,请使用此代码。它适用于 IE 和 FF、Opera 等。我的理解是:woff 字体在 Google 字体中很常见。
转到 here 之前将您的 ttf 字体转换为 woff。
@font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
首先,你不能阻止人们下载字体,除非它是你的,而且这通常需要几个月的时间。阻止人们使用字体是没有意义的。你在网站上看到的很多字体都可以在我下面提到的免费平台上找到。
但是,如果您想在您的网站中实现字体,请阅读以下内容:有一种非常简单且免费的方法可以在您的网站中实现字体。我会推荐 Google 字体,因为它免费且易于使用。例如,我将使用 Google 的 Bangers 字体。(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers) 这就是它的样子:HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
@font-face
适用于所有相当新的浏览器,但您需要有正确的格式;这就是为什么我建议使用 fontsquirrel.com 来自动化转换和规则生成的过程。是的,Google Webfonts 可免费用于商业用途 (little link for more info)。@font-face
声明中省略font-style:
和font-weight:
是否违反任何标准?;
之间添加format('truetype')
。