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格式),而不是仅使用计算机上提供的字体。

知道是什么原因造成的吗?我是在做错什么,还是浏览器不再考虑“本地”值了?

编辑:如果您想知道的话,DroidSerifItalic是Droid Serif字体的后脚本名称,如果您是从Font Squirrel下载的(至少是我读过的内容)。

EDIT-2:以防万一,我在Ubuntu(v12.04)上使用Chromium Web浏览器。

最佳答案

我查看了google的实现,他们使用了以下语法/名称:

src: local('Droid Serif Italic'), local('DroidSerif-Italic')


如果您使用此名称,我想它会起作用!似乎您只是错误地输入了附言名称。

资料来源:http://fonts.googleapis.com/css?family=Droid+Serif:400italic

10-08 19:24