【问题标题】:In @font-face CSS rule, doesn't the 'local' value (for 'src' attribute) work anymore?在@font-face CSS 规则中,'local' 值(对于'src' 属性)不再起作用了吗?
【发布时间】:2012-05-10 01:22:40
【问题描述】:

示例 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 是您从 Font Squirrel 下载的 Droid Serif 字体的后脚本名称(至少我已经阅读)。

EDIT-2:以防万一不够清楚,我在 Ubuntu (v12.04) 上使用 Chromium 网络浏览器。

【问题讨论】:

  • @AllanKimmerJensen 就在问题中,让我为您引用它- " ...但是浏览器(在我的情况下为Chromium)。 ..”
  • 哦,抱歉没看到,我添加了答案希望对您有所帮助。

标签: css font-face


【解决方案1】:

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

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

我想如果你使用这个名字就可以了!看起来你只是把后记的名字弄错了。

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

【讨论】:

  • 你是绝对正确的。踢自己,为什么我还没有尝试过?!谢谢,现在它也会帮助其他人。 :)
  • 取决于项目。我还建议您使用 google font API,人们可能已经缓存了文件,从而获得了更好的性能。可能有理由不使用它,但大多数情况下它是一个优点。
猜你喜欢
  • 1970-01-01
  • 2016-07-04
  • 2015-12-04
  • 2013-05-18
  • 2012-08-04
  • 2012-11-07
  • 2013-03-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多