示例 CSS:
@font-face {
font-family: 'Droid Serif';
font-weight: normal;
font-style: italic;
src: url('DroidSerif-Italic-webfont.eot');
src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
local('Droid Serif'), local('DroidSerifItalic'),
url('DroidSerif-Italic-webfont.woff') format('woff'),
url('DroidSerif-Italic-webfont.ttf') format('truetype'),
url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}
h1 {
font-family: 'Droid Serif';
font-weight: normal;
font-style: italic;
}
示例 HTML:
<div id="content">
<h1>This is a big, big title</h1>
</div>
Droid Serif 是当今 Linux 系统上非常常见的字体(至少它在我使用的 Ubuntu 上可用)。
正如您在上面看到的,我已经明确定义了local('Droid Serif'), local('DroidSerifItalic')
,但是浏览器(在我的情况下为 Chromium)只是下载字体文件(WOFF 格式),而不是简单地使用我计算机上可用的字体。
知道是什么原因造成的吗?我做错了什么,还是浏览器不再考虑"本地"值?
编辑:如果你想知道,如果你从Font Squirrel下载了Droid Serif字体(至少我读过),DroidSerifItalic
是Droid Serif字体的后脚本名称。
编辑-2:以防万一不够清楚,我在Ubuntu(v12.04)上使用Chromium网络浏览器。
我查看了谷歌的实现,他们使用以下语法/名称:
src: local('Droid Serif Italic'), local('DroidSerif-Italic')
我想如果你使用这个名字它会起作用!看起来你只是把后记的名字弄错了。
来源: http://fonts.googleapis.com/css?family=Droid+Serif:400italic