代码片段 → CSS → 如何在 CSS 中使用 @font-face

如何在 CSS 中使用 @font-face

Avatar of Chris Coyier
Chris Coyier 于

@font-face 规则允许在网页上加载自定义字体。一旦添加到样式表中，该规则就会指示浏览器从其托管位置下载字体，然后按照 CSS 中指定的格式显示。

如果没有该规则，我们的设计将局限于用户计算机上已经加载的字体，这些字体根据使用的系统而有所不同。这是一个很好的 现有系统字体的分解。

目录

通用浏览器支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
43.59123.1

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712744.2-4.3

浏览器支持的实用级别

事情 正在大力转向 WOFF 和 WOFF 2，所以我们可能可以做到这一点

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

你甚至可能可以做到这些天只使用 WOFF2。

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
3639否1412

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.0-10.2

使用 WOFF 的唯一实用之处也是它能让你获得 Internet Explorer 11 支持。

最深层次的浏览器支持

这是目前支持最广泛的方法。@font-face 规则应在任何样式之前添加到样式表中。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后像这样使用它来设置元素的样式

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

稍微更深的浏览器支持

如果您需要在完全支持和实用支持之间找到一种平衡，添加一个 .ttf 将覆盖更多范围

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
ChromeSafariFirefoxOperaIEAndroidiOS
3.5+3+3.5+10.1+9+2.2+4.3+

替代技术

@import

虽然 @font-face 非常适合托管在我们自己的服务器上的字体，但在某些情况下，托管字体解决方案可能更好。 Google Fonts 提供这种方式来使用他们的字体。以下是使用 @import 从 Google Fonts 加载 Open Sans 字体的示例

@import url(//fonts.googleapis.com/css?family=Open+Sans);

然后我们可以用它来设置元素的样式

body {
  font-family: 'Open Sans', sans-serif;
}

如果您 打开字体的 URL，实际上可以查看幕后完成的所有 @font-face 工作。

使用托管服务的一个好处是它很可能包含所有字体文件变体，这确保了深层的跨浏览器兼容性，而不必自己托管所有这些文件。

同样，你可以像链接任何其他 CSS 文件一样链接到相同的资源，在 HTML 文档的<head> 中，而不是在 CSS 中。使用 Google Fonts 中的同一个示例，这是我们将使用的内容

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

然后，我们可以像其他方法一样设置我们的元素样式

body {
  font-family: 'Open Sans', sans-serif;
}

同样，这是导入@font-face 规则，但不是将它们注入到我们的样式表中，而是将它们添加到我们的 HTML <head> 中。

它差不多是同一件事......两种技术都会下载所需的资源。

了解字体文件类型

这篇文章开头的原始代码片段引用了许多具有奇怪扩展名的文件。让我们逐一了解它们，更好地理解它们的含义。

WOFF / WOFF2

代表： Web Open Font Format（网页开放字体格式）。

WOFF 字体专为网页使用而创建，并由 Mozilla 与其他组织合作开发。WOFF 字体通常比其他格式加载更快，因为它们使用 OpenType (OTF) 和 TrueType (TTF) 字体使用的结构的压缩版本。这种格式还可以在字体文件中包含元数据和许可信息。这种格式似乎是赢家，所有浏览器都将转向它。

WOFF2 是 WOFF 的下一代，它拥有比原始版本更好的压缩率。

SVG / SVGZ

代表： Scalable Vector Graphics（可缩放矢量图形）（字体）

SVG 是字体的矢量重现，这使得它在文件大小上轻得多，也使其非常适合移动设备使用。这种格式是 iOS 上 Safari 4.1 及以下版本允许的唯一格式。Firefox、IE 或 IE Mobile 目前不支持 SVG 字体。 Firefox 已经无限期地推迟了实施，以专注于 WOFF。

SVGZ 是 SVG 的压缩版本。

EOT

代表： Embedded Open Type（嵌入式 OpenType）。

这种格式由微软（@font-face 的最初创新者）创建，是一种专有文件标准，仅 IE 支持。实际上，它是 IE8 及以下版本在使用@font-face 时唯一识别的格式。

OTF / TTF

代表： OpenType Font（开放式字体）和 TrueType Font（TrueType 字体）。

WOFF 格式最初是为了应对 OTF 和 TTF 而创建的，部分原因是这些格式很容易（并且非法地）被复制。但是，OpenType 具有许多设计师可能感兴趣的功能（连字等）。

关于性能的说明

网页字体在设计上很棒，但重要的是也要了解它们对网页性能的影响。自定义字体通常会导致网站性能下降，因为字体必须先下载才能显示。

一个常见的症状过去是字体首先以回退字体加载，然后闪烁到已下载字体的一瞬间。 Paul Irish 有一篇关于此问题的旧文章（称为“FOUT”：Flash Of Unstyled Text）。

现在，浏览器通常在默认情况下会在自定义字体加载之前隐藏文本。更好还是更糟？你来决定。你可以通过各种技术对此进行一些控制。这篇文章中并没有深入讨论这些内容，但这里有一组 Zach Leatherman 写的三篇文章，可以帮助你开始踏入这个兔子洞

在实施自定义字体时，还需要考虑以下事项

注意文件大小

字体的大小可能会出乎意料地大，因此请选择提供较轻版本的选择。例如，选择一个 50KB 的字体集，而不是一个 400KB 的字体集。

如果可能，限制字符集

你真的需要一个字体中的粗体和黑色粗体吗？将字体集限制为只加载使用过的字体是一个好主意，这里有一些关于这方面的不错建议。

考虑在小屏幕上使用系统字体

许多设备被困在糟糕的连接中。一个技巧可能是使用@media在加载自定义字体时定位更大的屏幕。

在这个示例中，小于 1000px 的屏幕将使用系统字体，而大于或等于该宽度的屏幕将使用自定义字体。

@media (min-width: 1000px) { 
  body {
    font-family: 'FontName', Fallback, sans-serif; 
  }
}

字体服务

有很多服务可以托管字体，并提供对商业许可字体的访问。使用服务的优势通常归结为高效地提供大量合法的字体（例如，在快速的 CDN 上提供它们）。

以下是一些托管字体服务

图标字体怎么样？

没错，@font-face 可以加载一个包含图标的字体文件，这些图标可以用作图标系统。但是，我认为使用 SVG 作为图标系统要好得多。这里是对这两种方法的比较。

使用 @font-face 的后续步骤

关于 @font-face 性能的更多内容

相关 CSS 属性

更多 @font-face 资源

悄悄话！创建一个 DigitalOcean 帐户并获得 $200 的免费信用额度 用于基于云的托管和服务。

评论

  1. Eddie
    评论永久链接#

    仅供参考，我认为您应该使用 Paul Irish 防弹方法。这似乎是一种更直接、更快的（更少的 HTTP 请求）格式。示例

    @font-face {
  font-family: Delicious;
  src: url(Delicious-Roman.eot);
  src: local('Delicious'), local(Delicious'), 
         url(Delicious-Roman.otf) format('opentype');
}
    回复
    • Micah
      评论永久链接#

      我同意 Eddie 的说法，但所有 TTF 和 OTF 字体都有 EOT 版本吗？例如，我不确定您是否可以找到 Calibri 字体的 TTF 和 EOT 版本。看起来那里有一个命令行实用程序可以 将 TTF 和 OTF 字体转换为 EOT，所以这可能是最好的解决方案，但这确实很麻烦。

    • Chris
      评论永久链接#

      fontsquirrel.com 允许您上传字体（确保许可证允许这样做），然后会为您创建字体的各种版本。

    • Shannon
      评论永久链接#

      这很棒。我有一个问题，我是否也要将字体上传到服务器？如果是，应该放在哪个文件夹？

  2. Nicola Seidita
    评论永久链接#

    嗨，
    我不明白在哪里可以找到 *.eot 文件或 *.otf 文件。有生成它们的方法吗？
    谢谢。

    回复
    • Alex Leiphart
      评论永久链接#

      这些是字体文件。扩展名 .otf 是开放式字体。

    • Murtaza
      评论永久链接#

      如果字体包含空格，例如我有一个名为“some font”的字体，但文件名是 somefont.ttf，我该怎么办？

    • traq
      评论永久链接#

      就像你刚刚做的那样：把两个词“放在引号中”。

    • Chris
      评论永久链接#

      如上所述 fontsquirrel.com.

    • Jeremy
      评论永久链接#

      谢谢，Chris！

      我知道我以前用过一次，但记不起在哪里找到的转换工具。节省了我很多时间。

  3. Jacob Bixler
    永久链接到评论#

    使用真字体是否需要指定本地字体？这是一个自制的字体，可能没有人会使用它。

    回复
  4. Thomas J
    永久链接到评论#

    我遇到一个问题，我使用的字体在小尺寸下无法正常渲染。几个小时后（和几根白头发），我发现如果你的样式表使用

    @media screen {
styles...
}

@media print {
styles...
}

    @font-face 应该在外部。像这样

    @font-face {}

@media screen {
styles...
}

@media print {
styles...
}
    回复
    • Andy
      永久链接到评论#

      谢谢！一直在发疯，想知道为什么这个在 FF 和 IE 中不起作用，现在已经解决了。

    • Conor
      永久链接到评论#

      你帮了我很大的忙，我花了三天时间疯狂地试图弄清楚为什么我的字体在 IE 中不起作用。

      谢谢！

  5. Muhammad
    永久链接到评论#

    真的非常感谢你

    回复
  6. Lennart
    永久链接到评论#

    我无法将字体上传（使用 cyberduck）到我的服务器（没有 ssh 访问权限），它们的大小最终为 0kb。Fontsquirrel 也给我一个错误（io 错误），这里有什么我错过的吗？我在 Mac 上，尝试过几种字体，但都无法使用。

    回复
    • Zandergraphics
      永久链接到评论#

      不确定上传的问题，但我使用 Chrome 从 fontsquirrel.com 获取了 IO 错误，我切换到 FF 并成功上传了。不确定这对其他人是否有帮助，但对我来说有效。

  7. George Dicu
    永久链接到评论#

    我使用 Paul Irish 的防弹方法，但在 IE7/8 中对我来说不起作用，而 Firefox 和 Opera 工作良好！！
    我会尝试这个解决方案

    <!--[if IE]>-->


@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}

    在 IE 中，我会告诉你它是否有效。

    回复
  8. Mohamed gad
    永久链接到评论#

    我在打印页面时使用 font-face 遇到一个严重问题，发现查看器没有显示我的字体，我如何在打印页面时定义我的字体。

    谢谢

    回复
    • billy
      永久链接到评论#

      我也有同样的问题。
      有人有想法吗？

    • Gabe
      永久链接到评论#

      你的 font-family 规则中是否包含备用字体？

      像这样

      .some-element{
    font-family: "Super Awesome Font", Arial, sans-serif;
}

      或者，你可以在打印样式中始终定义一个“安全”字体

      @media print{
   .some-element{
        font-family: Arial, sans-serif;
    }
}
  9. Renee
    永久链接到评论#

    我遇到了一个令人沮丧的问题。我无法在 Windows XP 上让 @font-face 正常工作。我在一台电脑上安装了 Windows Vista，并在所有浏览器中测试过，一切正常，然后我在 Windows XP 上检查，它根本看不到 @font-face。我尝试过几十种方法，但在 XP 上都失败了。我必须让它在 XP 上工作，它仍然是一个流行的操作系统。有什么想法吗？

    回复
    • ilter
      永久链接到评论#

      你在那台 WinXP 机器上使用什么浏览器？
      IE6？IE7,8,9？
      Firefox？

  10. James
    永久链接到评论#

    上传的字体文件应该放在哪里？它是相对于 url 的吗？如果它没有上传到根路径，那么我是否需要在 src 中包含路径引用？
    src: url('Delicious-Bold.otf'); to be say src: url('/font/Delicious-Bold.otf');

    谢谢
    James

    回复
  11. James
    永久链接到评论#

    我对此进行了实验，是的，它按预期工作；它相对于根 Web 文件夹。

    James

    回复
  12. supperman
    永久链接到评论#

    有没有办法修改现有的 otf 字体？

    在我的语言中，我们使用一些包含特殊符号的字体。这就是我问这个问题的原因。
    谢谢。

    回复
  13. AceeBaba
    永久链接到评论#

    是的，我也发现 Paul Irish 的方法在 IE6 中不起作用。但这种方法确实有效，即使在 IE5 中也一样

    /* @font-face */
@font-face {
    font-family: 'PhilosopherRegular';
    src: url('../fonts/philosopher-webfont.eot?') format('eot'),
         url('../fonts/philosopher-webfont.woff') format('woff'),
         url('../fonts/philosopher-webfont.ttf') format('truetype'),
         url('../fonts/philosopher-webfont.svg#webfontKWmDqtHl') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    background:#fff;
    color:#000;
    font:20px 'PhilosopherRegular', Georgia, serif;
}

    你可以在以下位置查看此演示：http://www.960development.com/how-to-write-cross-browser-font-face-syntax/

    很棒的文章，我希望在使用这种方法之后，我们不再需要使用 Cufon 或 sIFR 来替换字体。

    回复
  14. Adrian
    永久链接到评论#

    “ClearType 错误”怎么样？
    我的意思是，我知道有一个解决方案，但只适用于 IE6/7。
    对于其他浏览器怎么办？ :(

    回复
  15. Sol Martin
    永久链接到评论#

    你能在发送新闻稿时使用这种语法吗？
    你需要做一些改变吗？

    回复
  16. Brent
    永久链接到评论#

    截至 2011 年 4 月，这里有一个全新的防弹版本

    http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

    例如

    @font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }
    回复
  17. ChrisBinghamDesign
    永久链接到评论#

    我不得不通过艰苦的教训才明白，你必须将 @font face 代码放在文档的 中。它不会从 CSS 中获取资源！

    此外，从字体松鼠提供的 .eot 链接实际上会导致代码在 IE8 中失败。我不得不删除 src 链接，它才正常工作！它甚至在没有安装字体的其他计算机上也能正常工作。

    为什么它在 IE 中以这种方式工作，我不知道。我认为那个程序无法理解。

    回复
    • Steve
      永久链接到评论#

      ChrisB

      @font-face 确实可以在 CSS 文件中使用。确保你的 src 路径相对于根文件夹。尝试使用 AceeBaba 上面的代码。除了确保格式是 'embedded-opentype' 而不是 'eot'

      至于字体松鼠的 eot，它们在我的 ie8 中似乎可以正常工作。可能是因为上面提到的格式。

      此外，我不明白你是如何在没有 src 链接的情况下让它在其他计算机上工作的。除非你决定使用来自谷歌或其他人的外部链接。我不建议这样做，因为它会增加页面加载时间。但如果你这样做，请确保它位于你的 CSS 链接之上，否则它们不会知道它在哪里。

    • ChrisBinghamDesign
      永久链接到评论#

      Steve,
      感谢你的建议。在我最初的测试中，我确实确保了文件是从根文件夹获取的，但由于某种原因，我始终无法让代码工作。我无法理解为什么字体在 IE 中可以工作而没有资源，即使在 IE8 中也是如此！

  18. saiinch
    永久链接到评论#

    嗨，我在 Photoshop 中使用 Arial 12px 字体设计了一个网站模型，但是当我制作它的 HTML 时，Arial 字体在 HTML 浏览器中看起来不同，有什么解决方法吗？我真的很想知道。
    谢谢

    回复
    • Leban Hyde
      永久链接到评论#

      我知道这已经快两个月了，但如果你重新访问这篇文章......

      Photoshop 在文字工具中有一个抗锯齿功能。它位于顶部工具栏中的字体大小下拉菜单旁边，以及字符窗口的右下角。对于任何将在浏览器中生成的文本，我通常将其更改为下拉菜单中的“无”。

      它并不完全相同，但这是我们目前所能做到的最好的。确实没有行业标准工具可以渲染与浏览器相同的文本（渲染方式因浏览器和平台而异）。

      希望对您有所帮助。干杯！

  19. Pablo
    永久链接到评论#

    嘿......很棒的网站！......我正在尝试在网站中使用 GoogleWebFonts 作为 @font-face，但在 Google Chrome 中，它们看起来不像在 IE 或 FF 中那样好。我读到了一些关于 ClearType 的内容，但更改是在客户端进行的，所以对我来说没有意义......你们知道有什么方法可以解决这个问题吗？（字体是 .ttf）

    谢谢！

    回复
  20. hamid
    永久链接到评论#

    它在 FF6 上不起作用

    回复
  21. tota
    永久链接到评论#

    各位
    我使用的代码在 IE8/7 中不起作用，但在 IE9 中可以工作。

    注意：此字体支持阿拉伯语

     @font-face
        {
            font-family: 'MY'; /*src: url('GE_SS_Two_Bold.ttf'); */
            src: url('GE_SS_Two_Bold.eot');
            src: local('GE SS Two Bold'),url('GE_SS_Two_Bold.woff') format('woff') , local('GE_SS_Two_Bold'), url('GE_SS_Two_Bold.ttf') format('truetype');
        }
        h1
        {
            font: 20px 'MY' , Arial, sans-serif;
            letter-spacing: 0;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
            zoom: 1;
        }
    回复
    • tota
      永久链接到评论#

      感谢您的支持，请帮帮我，ASP

    • hamid
      永久链接到评论#

      谢谢！
      它再次不起作用！
      我测试了一下，发现它在波斯语或阿拉伯语中不起作用！！！

  22. DCvest
    永久链接到评论#

    我的字体大小有问题！例如，我的字体大小是 41px，它完美地适合，但是当它回退到 Arial 时，字体大小会加倍！我该如何只针对 @font face，我需要为 @font face 指定一个第二个样式表吗？

    回复
  23. John
    永久链接到评论#

    我从 fontspring.com (Avalon) 购买了一种字体，用于 http://www.dealscout.co.za
    我正在使用他们在样本文件中提供的 @fontface 声明，但字体本身在 Chrome 和一些旧的浏览器中看起来非常“锯齿状”。
    声明如下

    
@font-face {
 
    font-family: 'AvalonBook';
 
    src: url('Avalon-Book-webfont.eot');
 
    src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
 
         url('Avalon-Book-webfont.woff') format('woff'),
 
         url('Avalon-Book-webfont.ttf') format('truetype'),
 
         url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
 
    font-weight: normal;
 
    font-style: normal;

}

    您是否对可能导致这种情况的错误操作有任何建议，或者我们应该寻找新的字体？
    如果是这样，您是否推荐任何在 Avalon/Century Gothic 风格中具有更好的跨浏览器支持的字体？

    回复
    • Ron
      永久链接到评论#

      我在 Chrome 中遇到了 Avalon Book 的相同问题。您是否找到了解决方案？

    • Matt
      永久链接到评论#

      超级迟到的回复，但......

      这是 Google 渲染字体的方式（GDI 而不是 directwrite）的问题，它将在今年晚些时候发布的最新 Canary 版本的 Chrome 中得到解决。在此之前，有很多技巧可以使字体看起来更合适，我发现使用这个

      http://sassycoder.wordpress.com/2013/11/16/font-face-rendering-issue-in-chrome-2/

      结合一些 CSS 技巧，比如 text-stroke/text-shadow，通常对于大多数字体都能很好地解决。不要使用 -webkit-font-smoothing，它不再受支持。

  24. bhupendra singh
    永久链接到评论#

    我在 HTML 的头部中使用简单的选择器，但我的字体面不起作用

    页面中的样式表

    h1{fontface:”monotype corsiva”; size:10; color:”red”; fontweight=:bold}
    h2{font-face:”arial”; size:5; color:”blue”; fontweight=:bold}
    h3{font face:”magento”; size:20; color:”yellow”; fontweight=:bold}
    h4{font face:”times new roman”; size:15; color:”green”; fontweight=:italic}

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    请让我知道解决方案，要么在这里，要么在我的 ID 上：[email protected]

    回复
    • Shinyman Studio
      永久链接到评论#

      您是否将包含 @font-face 的 CSS 文件连接到您的 HTML 文档？您的文件放在哪里？您在哪些浏览器上测试过。

    • Cody
      永久链接到评论#

      “fontweight” 应该是 “font-weight”，并且应该只有冒号，而不是等号。

      此外，`font-weight` 的唯一值是“normal”或“bold”。
      要在 h4 中指定斜体文本，请使用：“`font-style:italic;`”

    • john
      评论的永久链接#

      这个网站是用来做什么的？

  25. RichW
    评论的永久链接#

    为什么人们还在使用 IE6/5！！哈哈，好文章，谢谢你的有用链接

    回复
  26. Brandon
    评论的永久链接#

    你好，

    我在使用 `@font-face` 时遇到了问题。
    我已经把一切都设置好了（我相信），应该可以了。当我在 Dreamweaver 中测试 HTML 时，它显示得很好，但是当我通过 FTP 上传到网站并清空缓存后，它又变成了系统字体。

    如果有人能帮忙，我会非常感谢！
    谢谢

    回复
    • Kaitlyn
      评论的永久链接#

      我也遇到了同样的问题！这个问题解决了吗？我最初使用 `@font-face` 来修复 Chrome 中 Google 网页字体的抗锯齿问题（真是讽刺啊），现在我把网站放到服务器上后，修复的质量就消失了。

      谢谢！

  27. Ian
    评论的永久链接#

    嘿，Chris，

    这篇文章很有帮助，我很想看到更多关于 `@font-face` 和多语言支持的内容。我很快就会开始一个项目，需要支持阿拉伯语和俄语，以及西方语言。

    回复
  28. BrianC
    评论的永久链接#

    `@font-face` 与 CSS 过渡配合得不好。它变得很卡顿和缓慢。

    回复
  29. Debbie
    评论的永久链接#

    安装了几天后，我的 CSS 网页字体就无法正常工作了，就像之前一样。现在网站很乱。但是，在 Chrome（甚至 Safari）上检查它时，字体看起来很正常。唯一的区别是在 Firefox 上。我不确定它是否升级了，但我目前的版本是 Mac 上的 8.0.1。

    如果有人能提供一些解决方案，将会非常有帮助。我的 CSS 代码如下，所有代码都是从 fontsquirrel.com 生成的，必要的文件也已上传。CSS 没有改变，但想知道为什么几天后看起来就不对了。提前谢谢。

    h2 {
    font-family: "UnitSlabProBlack",Georgia,serif;
}

 @font-face {
    font-family: 'UnitSlabProBlack';
    src: url('unitslabpro-black-webfont.eot');
    src: url('unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('unitslabpro-black-webfont.woff') format('woff'),
         url('unitslabpro-black-webfont.ttf') format('truetype'),
         url('unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

    *我把字体来源目录的完整链接放在了实际的 CSS 代码中。我只是为了安全起见，在评论中删除了它。谢谢。

    回复
  30. Anil
    评论的永久链接#

    你好，Chris，

    我使用了嵌入式字体，它工作正常。CSS 路径是 `css/index.css`
    而字体路径是
    `@font-face {`
    `font-family: ‘test’；`
    `src: url(‘../font/test.eot’);`
    其他一些 CSS..

    它工作正常。
    我的根目录 `index.html` 文件夹。
    但是，当我添加一个新的文件夹，比如 `newfolder`，并添加一个新的 `index.html` 文件时，字体没有显示。

    如何正确地设置 CSS 和嵌入式字体的路径，使其在所有地方都能正常工作？

    谢谢

    回复
  31. Ian
    评论的永久链接#

    嗨，Chris，

    我下载了 Google 字体，发现我正在使用的字体只有两种格式：ttf 和 menu。我尝试用 Google 搜索 `.menu` 扩展名，但没有找到任何信息。你知道这个扩展名是用来做什么的吗？

    谢谢

    回复
  32. seo
    评论的永久链接#

    嘿，大家好！我一直都在阅读你的博客，终于鼓起勇气从德克萨斯州达拉斯给你发个信息！只是想说，继续保持良好的工作！

    回复
  33. Idham
    评论的永久链接#

    谢谢，这就是我一直在寻找的。非常棒，伙计。

    回复
  34. Dagash
    评论的永久链接#

    按照这些说明操作后，单词的字母之间出现了空格……
    有什么建议吗……？？？

    回复
  35. Ben Palmer
    评论的永久链接#

    对于其他遇到此问题的人，这里有一个快速修复方法。

    此解决方案在 IE6 中无法正常工作，最后发现是后面的哈希导致了问题。

    简而言之，使用以下代码，删除 `#iefix`

    url('webfont.eot?') format('embedded-opentype'), /* IE6-IE8 */
    回复
  36. Subramanian
    评论的永久链接#

    我无法对 IE7 使用 `@font-face`。如果有任何解决方法，请帮助我……

    回复
  37. sraddha
    评论的永久链接#

    你可以从 http://www.font2web.com/ 获取所有字体格式。

    我的字体在 IE7 中没有显示，当我在不同的文件中尝试它时，它可以工作，但在集成到我的网站中时，它就不起作用了。请帮忙。

    回复
  38. Evert
    评论的永久链接#

    当我查看 caniuse.com 时，我注意到三点

    1) 所有 IE 版本都支持 eot
    2) 所有当前/现代浏览器都支持 ttf
    3) Opera mini 不支持任何格式

    基于此，我建议包含 eot 和 ttf 就足够了？为什么还要包含 woff 和 svg？

    回复
    • Idham
      评论的永久链接#

      好主意，Evert，我同意你的观点。这取决于每个开发人员如何实现 `@font-face` CSS。

    • Craig Patik
      评论的永久链接#

      WOFF 的文件大小不到 TTF 的一半（WOFF2 甚至更小）。

  39. invalididentity
    评论的永久链接#

    我爱你！！！
    我需要我的样式表和网站中正好有这个东西。

    非常感谢！

    回复
  40. Muhammad Azeem
    评论的永久链接# 
    @font-face {
font-family: ‘test’;
src: url(‘../font/test.eot’);

    当我像上面这样写字体名称 “test”，然后在 src:url(...) 中使用它时，它无法与这个字体名称 “test” 匹配。请帮我解决一下，如何在除了 “字体名称” 之外创建字体名称。
    谢谢

    回复
  41. Sams
    永久链接到评论#

    我在 Firefox 上遇到了 Arial 字体的奇怪问题，字体大小 17px 比在 Chrome、IE 7/8 上要宽得多。不知道有人能帮我解决一下吗？

    回复
  42. Dave K
    永久链接到评论#

    我不知道为什么，但我无法在 Firefox（或任何其他浏览器）中使用这个 Google 字体。它在 IE 中运行得很好，我使用 Fontsquirrel 将 Google 字体提供的 TTF 文件转换为所有我需要的格式，并将其放在与 CSS 文件相同的文件夹中。有人能看看哪里出错了？

    `@font-face {`
    font-family: Voces;
    src: url(‘Voces.eot’);
    src: url(‘Voces.eot?#iefix’) format(’embedded-opentype’),
    url(‘Voces.woff’) format(‘woff’),
    url(‘Voces.ttf’) format(‘truetype’),
    url(‘Voces.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    回复
  43. Subramanian
    永久链接到评论#

    @font-face 在 Ubuntu 操作系统上运行不正常。字体看起来很模糊。有什么解决办法吗？

    回复
  44. kamal kant
    永久链接到评论#

    感谢这些技巧

    回复
  45. Mono
    永久链接到评论#

    您好！我需要一些帮助。

    我正在使用 Webmatrix 7.1 和 IIS 7.5 express……这实际上是我第一次使用 Webmatrix，而我使用的字体没有渲染出来……。

    这是其中一个字体

    @font-face{
    font-family:MenuFont;
    src:url(‘Fonts/Arizonia-Regular.eot’);
    src:url(‘Fonts/Arizonia-Regular.eot?#iefix’) format(’embedded-opentype’),
    url(‘Fonts/Arizonia-Regular.ttf) format(‘truetype’),
    url(Fonts/Arizonia-Regular.woff) format(‘woff’),
    url(‘Fonts/Arizonia-Regular.svg#MenuFont’) format(‘svg’);
    }

    .Menu ul li a{
    font-family:MenuFont, sans-serif;
    text-decoration:none;
    color:#000000;
    }

    所以我现在很困惑……我认为我没有做错任何事，因为我在 .html 中使用记事本编写时，字体渲染正常。有人能帮我一下，或者告诉我是否存在任何兼容性或支持问题吗？我真的很感谢！！
    谢谢！

    回复
  46. Lucas
    永久链接到评论#

    打扰一下 Chris Coyier,

    我应该为 .otf 字体编写哪段 CSS 代码？

    谢谢

    Lucas

    回复
  47. Mustafa
    永久链接到评论#

    我在 Firefox 中遇到了一个问题：当我将 default.html 放在根目录中时，字体在所有浏览器中都正常显示，但当我将其移动到 en 文件夹中时，字体在 Firefox 中无法正常显示，但在其他浏览器中可以正常显示。
    我使用的是最新版本的 Firefox

    回复
    • Erika
      永久链接到评论#

      我在 Firefox（12.0）中遇到了同样的问题。如果我把字体放在我的根 Web 文件夹中，所有浏览器都可以正常显示。但如果我把它放在一个 fonts 子文件夹中，并使用正确的路径代码，所有浏览器都可以正常显示，除了 Firefox。是什么导致了这种情况？我更希望保持组织，将字体放在子文件夹中。有人找到了解决方法吗？

  48. Deepesh Nayak
    永久链接到评论#

    我在所有浏览器中都获得了正确的输出，但在 Firefox 中打印时网页字体无法正常显示，以下是我的 CSS 代码。

    `@font-face {`
    font-family: ‘C39P24DmTtNormal’;
    src: url(‘WebFonts/v100025_-webfont.eot’);
    src: url(‘WebFonts/v100025_-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘WebFonts/v100025_-webfont.woff’) format(‘woff’),
    url(‘WebFonts/v100025_-webfont.ttf’) format(‘truetype’),
    url(‘WebFonts/v100025_-webfont.svg#C39P24DmTtNormal’) format(‘svg’);

    font-weight: normal;
    font-style: normal;

    }

    回复
  49. Cart
    永久链接到评论#

    有人爱上了 fontsquirl 或者拿到了他们的佣金……
    幸运的是我有自己的服务器，所以我不需要所有这些想要成为但无法成为的虚假东西。

    事实上，所有这些家伙想要的就是你的数据，这样他们就可以从背后偷袭你！（就像 facecrook 和 google 以及所有这些狡猾的虚假家伙一样。幸运的是我不是……也没有;-)

    我强烈建议——使用互联网安全套（除非你寻求同情）——远离所有这些第三方“服务提供商”，并保持安全！

    回复
    • Cart's Mom
      永久链接到评论#

      你在胡说什么，笨蛋。“Fontsquirl” 是免费的……Font Squirrel 也是免费的。是时候离开电脑，回到你的火箭科学项目了。

  50. isabel
    永久链接到评论#

    嗨，

    我为此奋斗了好几个小时，但我就是想不出来。
    我可以在大多数浏览器中使用网页字体，但如果我想让它在 Internet Explorer 7 上运行，我需要把 html、css 和字体文件放在同一个文件夹中！

    这很乱，因为我使用六个大写字母的字体作为标题，但我找不到适合它的安全回退字体。

    奇怪的是，我在其他地方找不到任何关于它的报道，如果我使用 lyndas 教程中的文件进行测试，它在 IE 中可以正常运行。

    由于它可以在所有主流浏览器（包括 IE8 和 IE9）中运行，我认为路径是正确的，而且由于我的测试网站不在根目录，所以我无法在开发过程中提供绝对路径。

    我使用的是从下载的网页字体包中获得的最新 Font Squirrel 语法……

    有可能 IE7 在 CSS 中使用不同的路径位置，或者它可能在其他浏览器中运行是因为我已经有了本地副本吗？

    此致敬礼,
    isabel

    回复
  51. sid
    永久链接到评论#

    这对我有效，但渲染的字体比我简单地使用

    `@font-face {`
    font-family: ‘Baskerville’;
    src: url(‘baskerville.ttc’);
    }

    时要粗很多，其他字体也是这样，不仅仅是这个。是因为我使用 font2web.com 工具将字体转换为 eot 时，它创建了一个更粗、更丑的 eot 版本吗？

    如果是这样，我该如何让浏览器“优先”使用更漂亮的版本？

    回复
    • Ben Racicot
      永久链接到评论#

      这就是我来到这个页面的原因。很多时候，webkit 浏览器在 Windows 机器上以其自身格式显示可怕的字体……在我的情况下，Mac 在同一网页上完美地加载了相同的字体。我不太确定该如何解决这样的问题。

  52. Alicia
    评论永久链接#

    我使用 Paul Irish 的方法（在一个目前私人的网站上），在 Safari 中运行良好，但在 Firefox（我使用 Aurora）中不起作用。我的文件托管在 Apple 云上，而不是我自己的服务器。有谁知道一个好的解决方案吗？

    回复
  53. Godban
    评论永久链接#

    我以为要忘记 ie7-8 的字体。谢谢！

    回复
  54. Reza Baiat
    评论永久链接#

    在 IE <= 8 中，某些属性不受支持
    * 只支持一个 url
    * 不支持格式

    `@font-face {`
    font-family: 'BMitra';
    src: url('fonts/BMitra.eot?#');
    }

    回复
  55. Ajay
    评论永久链接#

    `@font-face {`
    font-family: ‘NumansRegular’;
    src: url(../font/Numans-Regular-webfont.eot);
    src: url(../font/Numans-Regular-webfont.eot?#iefix) format(’embedded-opentype’),
    url(../font/Numans-Regular-webfont.woff) format(‘woff’),
    url(../font/Numans-Regular-webfont.ttf) format(‘truetype’),
    url(../font/Numans-Regular-webfont.svg#NumansRegular) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    我在 CSS 文件中成功设置了 @font-face，它对特定类有效，但我想将该字体设置为 body 标签的默认字体。我这样写了 css...

    body { font:12px ‘NumansRegular’, Arial, sans-serif;} (不起作用)

    但它没有作为默认字体和大小应用到我的所有 html 页面。所以请告诉我如何使用 'NumansRegular' 字体作为默认字体？

    回复
  56. santosh
    评论永久链接#

    如何避免从网站动态加载网络字体（例如 Mylius Modern），而它已经在本地机器上存在？

    回复
  57. erick dion
    评论永久链接#

    嗨

    我需要你的帮助：我的问题是

    我的客户给了我一些额外的字体，我将 .ttf 文件插入到 ma css/font 文件夹中。
    现在我尝试运行 .ttf 字体文件。我已经从这个对话中获取了一些代码，但它仍然无法正常工作......请指导我 :-(

    回复
  58. matth
    评论永久链接#

    我不能使用 IE、firefox 和 google chrome

    回复
  59. Zhivko
    评论永久链接# 
    @font-face{font-family: 'segoepr'; src: url('../fonts/segoepr.ttf');}
@font-face{font-family: 'segoepr'; src: url('../fonts/segoepr.eot');}

    最好的，最简单的，在 Chrome 和 IE8 中都起作用...

    回复
  60. Lore
    评论永久链接#

    Firefox 在使用 @font-face 时，打印预览存在一个错误。我还尝试了 Cufon，但这也没能在 Firefox 的打印中显示出来。（我的漂亮简历字体就这样了！）

    尽管该错误被标记为已解决，但很明显它还没有。
    https://bugzilla.mozilla.org/show_bug.cgi?id=468568

    回复
    • Bilal
      评论永久链接#

      嗨 Lore

      你找到解决方案了吗？

      /Bilal

  61. Martin
    评论永久链接#

    我在 IE9 上遇到了问题

    这是一个最小的示例
    CSS

    @font-face {
    font-family: 'oxygenregular';
    src: url('oxygen-regular-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 24px;
    font-family: 'oxygenregular';
    font-weight: normal;
    font-style: normal;
}

    HTML

    “`重新加载正常

            Text must fit. Aaaaa.

    “`

    它从本地文件夹运行良好。从 IIS 加载时，它不起作用（尽管 eot 文件正在正常加载）。但是，如果我通过单击 HTML 中的链接来重新加载页面，它就会再次起作用。如果我点击刷新按钮来重新加载页面，它又会失效。出了什么问题？

    回复
  62. JM
    评论永久链接#

    IE 真的是个糟糕的浏览器 :/

    回复
  63. dheena
    评论永久链接#

    如何将 font-face 用于 LetterGothicStd，因为此字体无法在 fontsquirrel 网站上转换？

    回复
  64. Afy
    评论永久链接#

    不确定是否已经提到过，但 Google 字体比使用 TTF 和 OTF 文件更容易使用。有很多选择，所以你通常可以找到足够接近且可以免费用于商业项目的东西。

    http://www.google.com/webfonts

    回复
  65. Alex
    评论永久链接#

    嗨，感谢发布这篇文章。不过我很好奇 - 这行中“#iefix”之前的问号 (?) 是什么目的？

    src: url('webfont.eot?#iefix') …

    回复
  66. Henry Wood
    评论永久链接#

    当我使用 Chrome 浏览器时，出现了 io 错误！

    回复
  67. JB
    评论永久链接#

    页面顶部示例中的“用法”中的“MyFontFamily”是否应为“MyWebFont”以匹配 @font-face 声明？

    回复
  68. Paul Wallas
    评论永久链接#

    是否有任何修复（我已经到了可以接受肮脏修复的阶段）可以解决或至少改善 Chrome 中 @font-face 字体的字体平滑？

    我尝试将 SVG 字体放在 EOT 之前，使用 text-shadow 属性，最后使用 font-smoothing，但似乎都没有用。

    谢谢

    回复
  69. Patrick
    评论永久链接#

    感谢 Chris！你太棒了。

    回复
  70. My
    评论永久链接#

    嗨，我对 CSS 和其他网页设计东西不太了解，所以很抱歉我的问题。
    我用了一个在普通电脑上找不到的字体在我的网站上，所以当我的同学上传网页时，网页文字的字体变成了Times New Roman。所以我现在的问题是如何上传我用过的字体？请帮我。

    回复
  71. 教育机器人
    评论永久链接#

    最终解决

    嗨，我已经花了一些时间来解决我的网站上的这个问题，最终在所有浏览器中都能正常工作，我把这些重要的步骤整理了一下

    1) 如果你有字体类型 (ttf. otf)，请将它们转换为所有格式 (eot,svg,woof) (http://www.font2web.com/) 并下载到你的网站根目录中以供使用

    2)使用此代码 (修改 “font-family”, “myfont” 并使用绝对 URL 来查找文件)，在同一行中使用此代码非常重要，不要换行。

    @font-face{font-family:'GothamRM';src:url('http://absoluteURL/myfont.eot');src:url('http://absoluteURL/myfont.eot?#iefix') format('embedded-opentype'),url('http://absoluteURL/myfont.woff') format('woff'),url('http://absoluteURL/myfont.ttf') format('truetype'),url('http://absoluteURL/myfont.svg#GothamRM') format('svg')}

    3)在你的服务器上进行测试，在我的本地服务器上使用 xampp 可以正常工作，但在 IIS 公共服务器上 IE9 不工作，问题是

    IIS 7 没有为 .woff 文件定义 MIME 类型

    如果你尝试在 IE9 中打开你的 .woff 字体 (http://absoluteURL/myfont.woff)，你会收到一个 404 错误。

    为了解决这个问题，我打开 IIS，rootServer / MIME 类型，添加 MIME 类型 (扩展名 = .woff，MIME 类型 = application/x-font-woff)

    4) 最后，我再次尝试打开文件 http://absoluteURL/myfont.woff，它工作正常，我打开我的网站，它在所有浏览器中都能正常工作

    谢谢

    回复
  72. MEE
    评论永久链接#

    我正在做一个 wp 主题项目，我选择了带泰语字体的 font-face。
    来自该字体的泰语和英语字符，在多个现代浏览器中都能正常工作，

    但泰语字符在我的手机上无法正常显示，而是显示了默认的泰语字体。另一方面，来自该字体的英语字符在我的移动设备上工作得很好。

    我正在使用 HTC A one 和三星 Note，
    我还没有机会尝试其他设备

    有什么想法吗？

    回复
  73. Curtis
    评论永久链接#

    我无法使用 font-face 方法调用 Google 字体。我按照 Google 的说明使用链接 href

    如果我进行直接的样式表引用，它可以工作，例如

    .menu .mainlevel { font-family: Oranienbaum; }

    或者直接在 HTML 中的样式中。但我想创建一个名为 Header-font 的字体“别名”，我可以将不同的 Google 字体分配给它，以查看它们在我的整个网站上的显示方式。Font-face 似乎是解决方案，但它似乎只对驻留字体或直接 URL 字体起作用...我不知道如何让它识别 Google 字体系列。我已经尝试了各种调用方法，例如

    @font-face{
    font-family: Header-font; 
    src: url('http://fonts.googleapis.com/css?family=Oranienbaum');
}

    以及 src 的无数变体，例如

    src: local ('Oranienbaum')
url('Oranienbaum.ttf') format('truetype')
src: url('Oranienbaum')

    但什么都不起作用。有什么想法可以做到这一点，而不是下载我想要测试的每个 Google 字体并将其在本地调用？

    回复
  74. Praveen
    评论永久链接#

    有没有办法让浏览器在从网页（有网络）下载后，在本地（无网络）获取字体？

    回复
  75. maxorxy
    评论永久链接#

    @chris：非常感谢你！
    @Curtis：你用 src: url(‘Oranienbaum.ttf’); 测试过吗？
    这对我的浏览器上的另一个字体有效。

    回复
  76. john
    评论永久链接#

    @font-face，我发现压缩字体（例如 Futura 压缩淡色或粗体）在 IE8 及更低版本中无法渲染。有人知道如何解决这个问题吗？

    回复
  77. PeterMK
    评论永久链接#

    有没有针对 Firefox 字体渲染问题（仅限 Mac）的合适解决方案？
    它仍然存在于使用 icomoon 自制字体的字体中，这些字体是使用 svg 创建的。

    示例 Win | FF (21) on IOS
    https://www.dropbox.com/s/fg9z2j5sw4ai3au/fonts-error.png

    （白色背景上的沙色箭头字体，在 FF 上字体渲染得太粗，看不到箭头）

    应用的 CSS 属性
    speak: none;
    content: attr(data-icon);
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;

    有什么想法吗？
    （我已经尝试过：将字体大小设置为像素而不是 em，调整 font-weight...，但没有得到好的结果/实际上我得到了完全相同的结果/）

    回复
  78. Andriyan
    评论永久链接#

    我不知道为什么，但似乎有些字体在 IE8 下渲染，而有些字体就是不愿意渲染...

    我正在使用页面顶部的声明

    @font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

    有人遇到过这个问题吗？我不太关心 IE7...

    回复
  79. toma
    评论永久链接#

    这是什么？

    @font-face
    {
    font-family: "MyFont";
    src
    url("programebi/acadnu_font/Seogut.ttf") format("truetype"), /* Safari, Android, iOS */
    url("programebi/acadnu_font/Seogut.eot?") format("eot"), /* IE9 兼容模式 */
    url("programebi/acadnu_font/Seogut.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("programebi/acadnu_font/Seogut.otf") format("opentype"); /* 其他所有人使用这个 */
    url("programebi/acadnu_font/Seogut.woff") format("woff"), /* 现代浏览器 */
    url("programebi/acadnu_font/Seogut.svg") format("svg"); /* 遗留 iOS */
    }

    回复
  80. Poper
    评论永久链接#

    谢谢你的建议。

    回复
  81. 问题
    评论永久链接#

    我按照文章的说明操作，一切正常，但我使用了希伯来语字体，英语字符显示正常，但希伯来语字符无法渲染，问题只出现在 Chrome 上，Mozilla 和 IE 显示完美。不知道该怎么办，我在某个地方读到需要重新排序列表，并将 svg 放在开头，但这没有用。

    回复
  82. Rojan Gh.
    评论永久链接#

    我正在设计一个新的网页项目，我将在我的页面上使用图标字体来显示符号。
    你建议的组合是常用的组合，但使用这种组合，我在大多数浏览器中都会得到非反锯齿字体（我总是使用 Chrome、Safari、Opera、IE 7-10 和 FF 测试我的代码），所以我更改了组合，这里是我满意的组合。

    @font-face {
    font-family: 'Icon-Font';
    src:url('fonts/Icon-Font.eot');
    src:url('fonts/Icon-Font.svg#Icon-Font') format('svg'),
        url('fonts/Icon-Font.woff') format('woff'),
        url('fonts/Icon-Font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*Works with the help of some Javascript code in IE 7 only*/

    现在我只能在 IE 7 和 8 模式下看到低质量的符号，所有其他浏览器都能很好地渲染字体，就像它们是 PNG 图片一样。如你所见，我甚至没有使用 url('fonts/Icon-Font.eot?#iefix') format('embedded-opentype')，它也能正常工作！

    图标字体和普通字体之间可能存在差异，一旦我开始选择网页设计的字体，我会让大家知道，但现在，这对某些人可能会有用。

    我还必须提到，我在服务器端对 SVG 文件进行 GZip 压缩，这样一来，文件大小就和 TTF 和 EOT 文件一样小了。

    PS：我使用 Windows 8（通过浏览器模式使用 IE 7 到 10）和 Mac OS X 10.8 来设计、编码和测试我的 Web 项目。

    回复
    • Rojan Gh.
      评论永久链接#

      对于常规字体，我发现这种组合最适合渲染字体

      @font-face {
    font-family: 'Font';
    src: url('fonts/Font.eot');
    src:url('fonts/Font.ttf') format('truetype'),
        url('fonts/Font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

      我提取了 SVG，因为包括波斯语、阿拉伯语、希伯来语等非英语字符在使用 SVG 字体时无法正常工作。使用这种组合，我在 IE 7-10、FF、Chrome、Safari 和 Opera 中获得了最佳且最流畅的渲染效果。

      请注意，我使用 Windows 8 的 IE 10 在不同的模式下测试 IE 7-10。如果您发现我遗漏了什么，请告诉我。

      希望这能帮助大家。

  83. Randy K
    评论永久链接#

    我最近订阅了 H&FJ Cloud 字体库，并尝试弄清楚如何使用 @font-face。我想使用 Gotham 的常规和粗体字重。到目前为止，我一直做的只是将 H&FJ 提供的 CSS 链接放到 head 标签中，并在我的样式表中添加 font-family、font-weight 和 font-style 的常规声明。我没有所有不同的字体格式来声明。

    回复
  84. Matt Porter
    评论永久链接#

    我似乎遇到了 IE8 及以下版本无法渲染我的 @font-face 声明的问题。

    我已经尝试了所有在线找到的解决方案，这些解决方案都是其他人遇到该问题时找到的，现在我已经黔驴技穷了。

    我在我们的实时登录页面上遇到了这个问题：http://www.twdg.co.uk（这可不是恶意链接，这是一个真正的问题，我需要另一双眼睛来查看）。登录页面并不重要，但我需要解决它，因为我目前正在开发我们的新网站。

    提前感谢。

    回复
    • Matt Porter
      评论永久链接#

      为了回答我自己的问题，我终于想起来在 IE 开发工具中打开控制台，看到了以下错误“css3111: @font-face 遇到未知错误”，该错误与 .eot 字体有关。经过初步调查，似乎此错误与字体文件问题有关，可能是字体文件生成不正确，或者字体名称和文件名称不匹配，所以一旦我深入调查并修复它，我将分享。

    • Matt Porter
      评论永久链接#

      好的，我今天终于成功解决了这个问题。

      这篇文章帮助了我：http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

      基本上，用于生成 .eot 字体的原始文件在字体本身中存在不匹配，因此我使用 fontforge 来匹配字体文件家族名称、字体名称和人类名称。重新生成字体后，我的 .eot 文件已修复，并在 IE8 和 IE7 中正常工作。

  85. Daigo Fujiwara
    评论永久链接#

    喜欢您的网站/播客，Chris！我刚从字体供应商那里获得了一套网络字体，其中包含 svgz 文件（以及 woff、ttf、eot 和 svg）。svgz 的大小大约是 svg 的四分之一。哪些浏览器支持它们？如何使用它们？谢谢！

    回复
  86. Vivek
    评论永久链接#

    有人知道关于 .woff 和 .ttf 字体的问题吗？即使字体位于正确的位置，它总是显示 404 错误。

    回复
  87. bilal
    评论永久链接#

    我的字体家族在 IE 7 和 8 中不起作用，请帮助我。

    回复
  88. Greg Ledger
    评论永久链接#

    求助，我的设计师获得了一个使用来自三个不同来源的字体的设计的批准
    Google Fonts
    MyFonts（使用 @fontface 技术）
    以及 http://www.typograpy.com（专门提供一家铸造厂的字体）。

    有人知道是否可以在一个 Web 应用程序中使用所有三种字体吗？我使用的是 Joomla，但这并不是真正的问题。

    回复
    • Matt
      评论永久链接#

      记录一下，Google Fonts 也使用 @fontface…

      而且除了大量的开销外，没有其他真正的问题

  89. Tiji
    评论永久链接#

    我一直在我的网站 http://www.moreonfew.com 上使用 Google Fonts，我必须说我真的很喜欢它。它不仅加载速度更快，而且还提供了大量可供选择的字体。

    回复
    • Szatanica
      评论永久链接#

      但 Google Fonts 有时会使用旧版本的字体，因此它们渲染起来很奇怪。

  90. RioBrewster
    评论永久链接#

    @Greg Ledger

    如果所有字体都具有允许在线使用的许可证，那么就没有理由不能使用它们。
    访问 FontSquirrel，看看他们是否已经为这些字体创建了字体包。如果有，下载它们，合并 stylesheet.css 文件，然后就可以开始了。

    如果 Fontsquirrel 还没有字体包，请访问网络字体生成器，上传 .ttf 文件，它将为您创建字体包。

    坦白地说，谁在乎网络字体是否在 IE8 及以下版本中渲染？如果您要使用旧版本的浏览器，您可能甚至不知道除了 Times New Roman、Arial 和 Verdana 之外还有其他字体，而且您也无法看到所有其他美观的字体。

    说真的，我真的很想开始在我的 ieHacks.css 文件中使用 normalize.css。特别是与 Foundation 结合使用。

    回复
  91. RioBrewster
    评论永久链接#

    不要忘记这样做

        @font-face {
...
  font-weight: bold;
   font-style: normal;
}

    如果您的字体是粗体的，那么您可以使用实际的粗体字体，而不是浏览器的“伪粗体”，并且仍然可以保留粗体回退。

    回复
  92. Ramsin Jacob
    评论永久链接#

    大家好,

    我刚完成了我的网站。

    我将字体代码设置为“Trajan Pro”

    在我的 Macbook Pro 和 Mac 桌面电脑上，字体样式显示正常，但对于其他用户来说，它看起来像 Arial 字体或一些通用字体。我相信我已经找到了解决方案，在这个页面上的代码中，但我对如何设置它感到困惑。比如，如何上传字体？我没有文件，我只是在代码中输入了它。然后，我在我的 html 或 css 中的什么位置放置这段代码呢？

    任何建议/帮助将不胜感激。谢谢。

    回复
    • Szatanica
      评论永久链接#

      如果你使用的是 @font-face，那么它始终是 CSS。并且与 CSS 一样，你可以将其放在 HTML 或 CSS 文件中，但是将其放在 HTML 中没有任何意义，因为如果 CSS 文件比你的 HTML 加载更快（这有点奇怪，但我猜这种情况可能会发生），@font-face 可能会无法加载，因此回答你的问题 - 将 @font-face 放在你的 CSS 文件的开头。访问 Fontsquirrel，下载包含你字体的 WebTypeKit，并阅读包含在里面的手册 How_to_use_webfonts.html。希望这能有所帮助。:)

  93. Carlos L.
    评论永久链接#

    使用字体的 base64 版本并排除所有其他版本怎么样？这样最优/实用吗？

    回复
    • Stephen James
      评论永久链接#

      Base64 编码对我有用。我用 EOT 和 WOFF 尝试过。

  94. JL
    评论永久链接#

    我发现，在使用 @font-face 自定义字体时，每个浏览器渲染它们的方式都有所不同。Chrome 和 FF 之间的边距和填充总是不同的。Chrome 和 Opera 相同，但 FF 和 IE 都需要一些调整才能保持一致性。例如，字母间距在 Chrome、FF 和 IE 之间总是不同的。我发现自己一直在浏览嗅探并分别调整字体

    if(is_IE){ 
  $(font_instance).css(marginTop:"+=2px");
}

    这有效，但显然浏览器嗅探，尤其是在这种方式下，效率非常低。不过，存在一些非常奇怪的差异。

    有什么想法吗？还有人遇到过这种情况吗？

    回复
    • Szatanica
      评论永久链接#

      在 CSS 文件中添加特定于浏览器的前缀是否有意义？

  95. JL
    评论永久链接#

    是的，这样做更有意义，我会这样做的。我不知道可以这样做。我用过供应商前缀来设置关键帧等等，但我不知道它可以应用于字体定位。感谢你的回复。

    回复
  96. Vivek Moyal
    评论永久链接#

    我使用了所有字体类型，但只有一行 woff 代码

    src:url(../fonts/Simple-Line-Icons.woff) format('woff');

    对我有用…谢谢

    回复
  97. Lalit
    评论永久链接#

    字体面在 ie9 和旧版本中不起作用，请给我们建议

    如果您有关于 ie9 和旧版本的解决方案

    回复
    • Chris Coyier
      评论永久链接#

      但确实有效；）

    • lalit
      评论永久链接#

      给我们建议如何做

    • Chris Coyier
      评论永久链接#

      您使用此代码段中提供的代码。如果它在 IE 9 中对您不起作用，我建议创建一个简化的测试用例并将其发布到论坛上。

  98. Simon
    评论永久链接#

    我使用 WOFF url，它在我的主页上加载正常…但是当我访问我的网站上的另一个页面时，字体会恢复到默认字体….

    有什么想法为什么会出现这种情况？

    字体面没有被另一个 CSS 样式表覆盖。

    干杯！

    回复
    • Simon
      评论永久链接#

      通过将 https 和 http 声明为单独的字体族，我使它工作了

      @font-face {
    font-family: 'andika_basicregular';
    src: url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot');
    src: url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff2') format('woff2'),
         url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff') format('woff'),
         url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.ttf') format('truetype'),
         url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.svg#andika_basicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'andika_basicregulars';
    src: url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot');
    src: url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff2') format('woff2'),
         url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff') format('woff'),
         url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.ttf') format('truetype'),
         url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.svg#andika_basicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
  99. Jose
    评论永久链接#

    请使用 WOFF2 格式更新代码段。

    示例

    @font-face {
    font-family: MyFont;
    src:
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
    回复
  100. GaneshShetty
    评论永久链接#

    如果每个代码都有示例，理解起来会更好

    回复
  101. xavhan
    评论永久链接#

    嘿，你们有没有什么技巧可以快速查看浏览器使用了哪个源文件。字体正在工作，但我无法确定我的浏览器是使用 woff、ttf 还是甚至 svg 文件。

    在 Firefox 的字体面板中非常明确，但我正在寻找一种在 Chrome 开发者工具中查看它的方法。
    有什么想法吗？

    回复
    • cyn3rgy
      评论永久链接#

      @xavhan，使用开发者工具并查看网络部分（浏览器下载的文件），对我来说似乎工作正常。我不知道还有其他方法，但可能会有。

  102. John-Albert Eadie
    评论永久链接#

    使用顶部的 css 在我测试过所有 PC 和浏览器上都运行良好，但在使用最新 Chrome5 (39.xyz) 的 Android 上却无法运行，即使包含了 woff2 文件和引用。

    回复
  103. Mario Ranftl
    评论永久链接#

    感谢您将这些 CSS 模板整合在一起并讨论了其含义。

    我使用这些模板在 google-webfonts-helper 服务 中生成 CSS 代码段，以便轻松下载所有格式的 Google 网页字体（woff、woff2、svg、ttf 和 eot 文件）并自行托管它们。

    回复
  104. yazı fontları
    评论永久链接#

    有些字体文件真的很大。尽管它们为设计增添了美感，但它们会显着增加页面加载时间，因此会影响搜索引擎排名并降低网站回头客数量。虽然一些用户无需使用 Cyrillic、阿拉伯语等扩展语言参数，但我需要使用它们。这几乎使字体文件大小增加了一倍。因此，我记得我不得不在一些页面上使用 Arial、Tahoma 等标准字体，尽管我想使用新时代的字体。

    如果有一天，所有字体文件可以合并成一个唯一的文件，并且可以被所有操作系统和设备读取，那就太好了。有了它，将加快页面的加载速度，从而提升用户的体验。

    说起来容易，是否会变成现实（应该会！），我们拭目以待。

    回复
  105. 迈克尔·A·沃尔兹
    评论永久链接#

    使用顶部的 css 在我测试过所有 PC 和浏览器上都运行良好，但在使用最新 Chrome5 (39.xyz) 的 Android 上却无法运行，即使包含了 woff2 文件和引用。

    回复
  106. 福雷斯特·J·克瓦斯尼科夫
    评论永久链接#

    这里有一个非常新手的问题。对于以下两个，字体格式文件的链接是如何处理的

    url(‘webfont.svg#svgFontName’) – #svgFontName 部分是否更改为 #svgMyAwesomeFont 或 #MyAwesomeFont？另一方面，在字体文件实际链接之后，#SomeText 到底是什么？
    类似的问题，url(‘webfont.eot?#iefix’) – ?#iefix 是否在字体文件链接之后被删除，为什么？

    回复
  107. 辛西娅
    评论永久链接#

    许多基于网络的字体面生成器的优势在于它们实际上执行了许多处理（例如，去除字体名称中的特殊字符、生成正确的 CSS 等），以确保生成的字体面能够在各种浏览器中正常工作。除了这里提到的字体松鼠之外，everythingfonts 在字体面生成器方面也做得很好： https://everythingfonts.com/font-face。

    然而，网络字体生成器的缺点是它们会更改字体名称，因此与许多字体许可证不兼容。

    回复
  108. 马克
    评论永久链接#

    米卡（2009 年），六年后，依然如此！
    http://blog.fonts.com/2013/01/opentype-feature-support-now-possible-in-nearly-any-browser/

    回复
  109. 亚伦
    评论永久链接#

    您好。我认为您的第二段代码片段中有一个错字。
    目前
    url(‘myfont2.woff’) format(‘woff2’)
    应该是
    url(‘myfont.woff2’) format(‘woff2’)

    回复
    • Chris Coyier
      评论永久链接#

      你说得非常正确。谢谢，已修正！

  110. 莎拉·德拉森
    评论永久链接#

    去年在 HTML5DevConf 上，我看到伊利亚·格里戈里克做了一个非常有趣的演讲，主题是“让网络字体更快”。最宝贵的收获是，如果你使用谷歌字体中常用的字体，并且使用 html head 链接，那么该字体很有可能已经被缓存到用户的浏览器中。因此，对于更流行的字体，加载时间将会更短。我以前想要使用更独特的字体，现在已经改变了我的开发习惯。只是想把这些信息分享一下。

    回复
  111. 马蒂亚斯·拜恩斯
    评论永久链接#

    更正

    实用 […]: Opera 27+ 应该是 Opera 11.50+。
    超级前瞻性 […]: Opera 10+ 应该是 23+。
    谷歌字体 URL 应该使用 HTTPS。

    回复
    • Chris Coyier
      评论永久链接#

      已修复。

    • 马蒂亚斯·拜恩斯
      评论永久链接#

      看起来你忘了我列表中的最后一个建议？

    • Chris Coyier
      评论永久链接#

      我将更新为协议相对…

      谷歌本身也提供了它，就像我在文章中写的那样，所以我不知道他们是否 PREFER 你不要使用 HTTPS，或者是什么。但是由于无论哪种方式都有效，我认为协议相对是最好的选择。

  112. 汉斯·科弗特
    评论永久链接#

    如果我没记错的话，IE7+IE8（总计）的桌面浏览器市场渗透率仍然约为 5%，在我看来，这高得让人无法忽视。这里介绍的 none @font-face-solutions 都不适用于 IE9 之前的浏览器。那么它们该怎么办？

    回复
    • 皮特
      评论永久链接#

      汉斯，第一个示例就包含 IE6-8 的支持。

      @font-face {
  font-family: 'MyWebFont';
...
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
...
}

      或者，如果你更喜欢 @import，那么谷歌的语法是最好的选择。它会根据请求的浏览器，接收你的请求并回复相应的 @font-face。

    • 汉斯·科弗特
      评论永久链接#

      谢谢，彼得。最初，我在这么长的讨论中错过了它。

  113. RioBrewster
    评论永久链接#

    关于使用媒体查询来提供系统字体的问题。浏览器是否会预加载字体，无论视窗大小如何？或者是我把这和图片搞混了？

    回复
  114. 肖恩
    评论永久链接#

    字体的情况依然荒谬。谷歌让网络字体免费使用，这很好。现在他们应该允许将它们包含在主要操作系统的基本安装中。这样一来，这荒谬的闹剧就结束了。

    回复
    • 格温妮丝·刘易斯
      评论永久链接#

      你是说所有字体吗？截至 2022 年，已经超过了 1000 种（不包括每种字体的所有变体）...

  115. 亚西尔·伊利亚斯
    评论永久链接#

    我正在使用名为 FSDillonWeb-Regular 的字体，但问题是，我没有 ttf 格式文件，这是一个 PHP 项目，字体位于 C:\xampp\htdocs\falcon-crm.eoe_staging\wp-content\themes\eoe
    我在 CSS 中提到了它的路径;
    `@font-face {`
    font-family: FSDillonWeb-Medium;
    src: url(‘fonts/FSDillonWeb-Medium.woff’);
    font-weight: 500;
    }
    字体不起作用，我的项目进度很慢。有人能帮帮我吗？

    回复
    • 黑客
      评论永久链接#

      我不确定是不是这里出了问题，但你说你使用的是名为“FSDillonWeb-Regular”的字体，但在 CSS 中却写了“FSDillonWeb-Medium”。

  116. 马克
    评论永久链接#

    Re: ‘快速’ 的 CDN 字体服务：并非如此！本来可以的，但所有 CDN 服务都涉及字体文件保护，此外还要在字体服务脚本编译过程中摸索。除了 Google 外，您列出的所有字体服务在炎炎烈日下都是巨大的累赘。在大多数情况下，使用 Google 获得最佳速度，否则这是一篇很棒的 @fontface 文章。
    顺便说一下：Shawn 关于将 Google 网页字体添加到操作系统的想法很好，但… 现在 Google 在欧洲的垄断和其他贸易违规行为非常普遍，将 Google 字体添加到计算机中很快就会像运行付费的“秘密”字体服务一样致命高效，像胶水一样粘住的 CDN 计算。不是开玩笑。

    回复
  117. Vlad
    评论永久链接#

    为什么 W3 验证器认为当使用多个字体时，指向 Google WF 的链接无效？http://c2n.me/3maRyeA.jpg
    你能分享一下这个吗？
    我只能忽略 W3v 的意见，或者花点时间通过将代码分成两行来解决它。
    Google 不知道吗？

    回复
    • Eno
      评论永久链接#

      我知道这条评论有点旧，但你可以将管道字符转义为 Unicode 版本 %7C。

  118. jmerrikin
    评论永久链接#

    我刚尝试使用 .otf 字体使用 opentype 格式，它似乎在任何地方都能正常工作。

    @font-face {
  font-family: Avenir;
  src: url("path-to-the-font-file/Avenir.otf") format("opentype");
}

    有什么理由我不应该这样做，而选择 6 种字体扩展，例如：woff2、woff、eot 等？

    回复
  119. Patrick
    评论永久链接#

    嗨，
    您认为现在只使用 woff 可以吗？
    另外，在我的网站上有一些作为图片嵌入的 svg，这些图片中使用的字体只能从安装了此字体的计算机上看到，即使我在 @fontface 规则中包含了 svg 文件… 有没有人知道如何解决这个问题？
    谢谢！

    回复
  120. Ryan
    评论永久链接#

    一直在尝试这篇文章中提到的几个选项

    Google 网页字体是否只在它们的 @font-face 字族中使用 .woff 或 .woff2？这意味着其他字体扩展不支持这种技术。

    我点击了上面提到的“使用托管服务的好处是它可能包含所有字体文件变体，这确保了跨浏览器兼容性，而无需我们自己托管所有这些文件”的链接，但没有发现文件扩展名的多样性。

    后来我下载了我想使用的 Google 字体，使用网络工具将所有格式都转换了，并且将这些文件本地化到服务器。

    回复
    • Chris Coyier
      评论永久链接#

      如果您想看看 Google 向您提供的内容，请记住，他们可能会（而且很可能正在）进行服务器端 UA 嗅探，以查看您需要什么，并只提供该代码。

  121. Arnold
    评论永久链接#

    各位您好：
    我在 Win 8 上工作，使用这段代码。它适用于 IE、FF、Opera 等。
    我了解到：woff 字体在 Google 字体上很轻便且很常见。

    @font-face {
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
    回复
  122. Christian
    评论永久链接#

    大家好：
    我在我的 Squarespace 网站上添加了一个自定义字体，但它不起作用。它在 Chrome 和 Firefox 中一直运行到 2016 年 8 月初（时间可能不准确），但现在不工作了。这个 CSS 字体在我的 iPhone 上的 Safari 和 Chrome 中工作，但在笔记本电脑上不工作。有人知道是什么问题吗？我把字体链接到了 Squarespace 的“管理自定义文件”文件夹中。

    回复
  123. Kiran Makam
    评论永久链接#

    我如何将字体面应用为内联 CSS….

    <td align="center" valign="top">
<h2 style="@import url(https://fonts.googleapis.com/css?family=Francois+One); font-family: 'Francois One', ">{(label_email_title)}</h2>
</td>
    回复
  124. Shyam Chathuranga
    评论永久链接#

    感谢这篇文章。我一直想知道为什么我应该使用不同的字体格式，因为有些格式的文件大小比 WOFF 大很多。

    回复
  125. sasikumar
    评论永久链接#

    是否可以在字体面中使用多个字体，如果可以，如何操作。

    回复
  126. cccp
    评论永久链接#

    不知道有没有人能帮我，我觉得我已经尝试过所有方法来清除 Chrome 缓存，更改字体后它就是不加载新的字体，Safari 开始时也有同样的问题，但 Safari 让我在几秒钟内就用开发者菜单禁用了缓存，我就能实时看到它发生了，我已经清除了 Chrome 缓存 1000 多次了，它仍然加载的是旧的字体集，我知道这属于 Chrome 支持，但是，也许这里有人，因为这与使用 @font-face 相关，知道解决方案并且遇到了同样的问题。这就是我在这里碰碰运气的原因。

    回复
    • cccp
      评论永久链接#

      不用担心，问题解决了，我的问题是 Chrome 不能像 Safari 那样只依赖 svg 文件，Chrome 和其他浏览器一样，测试了 Firefox 和 Opera，都需要所有可用的字体，如 eot、ttf、woff… 我希望我能够像这样简单地使用 svg 文件，因为在这个特定的服务器上无法上传任何真正的字体类型。

  127. Jude
    评论永久链接#

    您好，我需要一个快速解决方案。我想在我的网站上使用原始字体，这是一个 .ttf 文件。我该怎么做？
    谢谢

    回复
  128. Albo
    评论永久链接#

    我正在嵌入 Linux Libertine 和 Linux Biolinum。我在这里的大多数评论中看到，人们在 font-face 声明中添加了多个 src+url。我在其他地方发布的 Linux Libertine/Biolinum 示例中，每个 woff 文件都有一个单独的 font-face 声明，字体样式大概是每个 woff 的“守门员”。有什么最佳实践吗？只使用一个声明更有效，加载速度更快吗？浏览器足够智能可以找出正确的渲染方式吗？

    回复
  129. Albo
    评论永久链接#

    （为了说明，每个 Libertine 和 Biolinum 都包含几个 woff：常规、斜体、粗体等。所以我最终得到了 9 个 font-faace 声明！）

    回复
  130. Zubair
    永久链接到评论#

    我们可以在 iOS 应用程序中使用 @font-face 来获取应用程序内的本地字体文件吗？就像我想使用 fontAwesome，但是 @font-face 不起作用，而当我使用 时它却可以正常工作。

    回复
  131. Emma
    永久链接到评论#

    有人可以帮我吗？我的自定义字体在我的 WordPress 后端工作正常，但在前端却无法加载？

    回复
  132. Riccardo
    永久链接到评论#

    我在 PHP 中做了一些事情来加载外部字体并提高网页性能。也许它会很有用。
    https://github.com/RickyIta68/font-performance-control
    https://www.phpclasses.org/package/10839-PHP-Optimize-the-load-of-page-fonts-embedding-into-CSS.html

    回复
  133. Aaron Severson
    永久链接到评论#

    这篇文章对我很有用，但我有一个小建议：当您谈到限制字符集时，最好提一下这对于某些开源字体许可证来说可能很麻烦。例如，OFL 认为子集或优化是修改，因此在不更改任何保留字体名称的情况下进行操作可能违反了许可证。此问题在此处讨论：https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web_fonts_and_RFNs

    回复
  134. Carrie
    永久链接到评论#

    非常感谢！这为我节省了几个小时自己寻找解决方法的时间。:)

    回复
  135. Jeff Tucker
    永久链接到评论#

    WOFF2 支持现在更加广泛。IE11 不支持它，El Capitan 及更早版本的 Safari 或 Opera Mini 也不支持。除此之外，一切顺利！

    https://caniuse.cn/woff2

    回复
    • burak
      永久链接到评论#

      嗨，我们可以像这样使用多种字体样式吗

      @font-face {
    font-family: 'passwordsecretregular';
    src: url('eotPasswordsecret-Regular.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype');
    src: url('passwordsecret-webfont.woff2') format('woff2');
    src: url('passwordsecret-webfont.woff') format('woff');
    src: url('Passwordsecret-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

      它们的顺序重要吗？如果是，正确的顺序是什么？
      谢谢..

  136. naks
    永久链接到评论#

    我找不到我的问题的答案，也许你能帮我。
    link rel = “preload” 是否适用于 @font -face？
    无法在没有 link 标签的情况下预加载字体，此标签是否可以与此规则配对使用？

    已修复评论。

    回复
  137. Mehmet Kağan KILIÇ
    永久链接到评论#

    我再试一次，用于此解决方案，

    @font-face {
  unicode-range: U+633, U+36;
  src: url('eotPasswordsecret-Regular.eot');
}

    或不是 svg 的 @font-face

    @keyframes {
  @font-face {
    unicode-range: U+633 U+36;
  }
}

    我没有在命令行中编写 CSS。command-line.css。

    @counter-style 不好。

    @counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}
    回复
  138. Srinivas
    永久链接到评论#

    我一直在我的网站上使用 Google 字体 https://itsmycode.com 但是主要问题出在页面速度上。最近的 goolge 页面速度更改对外部字体和 css 产生了很大影响。我已经至少将字体下载到本地并尝试使用它。

    有没有办法对其进行优化并提供更好的服务？类似于 WordPress 网站的异步加载吗？

    回复
  139. Ranjithkumar S
    永久链接到评论#

    实际上，我正在我的网站上使用 Google 字体 (Varela Round) https://codingdiksha.com 问题是 Google 页面速度测试显示我需要预加载字体。我不知道怎么做。你能帮我预加载 Google 字体吗？

    回复
    • Geoff Graham
      永久链接到评论#

      这里有一个方便的小片段可以帮助你：https://css-tricks.org.cn/the-fastest-google-fonts/

    • 格温妮丝·刘易斯
      永久链接到评论#

      虽然我大部分时间都使用 Google 字体来做所有事情，但也有一些特殊情况，我别无选择，只能自己托管字体。

      我想知道是否可以通过应用本文中描述的相同技巧（以及其中链接的相关技巧）来真正提高渲染这些自托管字体的速度（通过 Google 页面速度测试、YSlow 等衡量）。

      有人对自托管字体做过这样的实验吗？

  140. Sumit
    永久链接到评论#

    网络缓慢，由于这些原因，Chrome 将使用 @font-face CSS 规则以回退字体显示。

    但我找到了一些解决方案，我也在我的网站上使用它们 kodlogs.net

    我已经将这些解决方案整理在一起 这里

    回复
  141. Ram
    永久链接到评论#

    我计划在我的网站上使用 Google Noto 字体

    它支持很多语言（800 多种），并且计划将网站本地化为不同的语言。

    我注意到一些字体大小非常重，实际上大约 20mb+，变体也同样很重。有没有办法优化它？我觉得加载 30mb+ 的字体大小对网页的性能影响很大

    我应该下载字体并使用以下方法吗？

    font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;

    或者只是直接将 google 链接配置为样式表

    <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
<style>
body {
    font-family: 'Noto Sans';font-size: 22px;
}
</style>
    回复

发表评论

您的电子邮件地址将不会被公开。 必填字段标有 *

© 2024 . All rights reserved.