程序员经验分享-hwhale

自 2012 年底起实施@font-face

2024-04-14

我花了几个晚上研究在当今的现代浏览器中实现 @font-face 的最佳方法。我是一名全职网络/系统开发人员，具有图形设计师的背景，我发现网页设计的机会和可能性变得越来越有趣。因此，我做了一些测试，想听听是否有人对此有建议、更好的想法或意见。我的测试场景如下所示。

我测试了很多不同的在线工具和应用程序，但最终我将其归结为一项在线服务和一个应用程序。

  • FontSquirrel，在线工具 - 免费。http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
  • FontXChange，适用于 mac/win 的应用程序 - 99 美元。http://fontgear.net/fontxchange.html http://fontgear.net/fontxchange.html

我使用了 Mac 附带的字体 Tamil Sangam MN 和 Tamil Sangam MN Bold，两者都是开放类型 .otf。

  • 泰米尔语SangamMN.otf - 290 KB
  • 泰米尔语SangamMNBold.otf - 271 KB

研究转化规模

松鼠字体

这是一个很好的在线工具，非常好。有几种不同的模式，我使用了基本模式和最佳模式。我的 .otf 文件的输出是 svg、ttf、eot 和 woff。

Basic

Regular

  • 泰米尔语SangamMN.svg233 KB
  • 泰米尔语 SangamMN.ttf71 KB
  • 泰米尔语 SangamMN.eot25 KB
  • 泰米尔语SangamMN.woff30 KB
  • 总计：359 KB

Bold

  • 泰米尔语SangamMNbold.svg225 KB
  • 泰米尔语SangamMNbold.ttf69 KB
  • 泰米尔语SangamMNbold.eot25 KB
  • 泰米尔语SangamMNbold.woff30 KB
  • 总计：349 KB

Optimal

我注意到的第一件事是，最佳字体比基本变体小得多 ~ 260 KB！

Regular

  • 泰米尔语SangamMN.svg33 KB
  • 泰米尔语 SangamMN.ttf25 KB
  • 泰米尔语 SangamMN.eot15 KB
  • 泰米尔语SangamMN.woff17 KB
  • 总计：90 KB

Bold

  • 泰米尔语SangamMNbold.svg33 KB
  • 泰米尔语SangamMNbold.ttf25 KB
  • 泰米尔语SangamMNbold.eot15 KB
  • 泰米尔语SangamMNbold.woff17 KB
  • 总计：90 KB

字体X更改

这个工具的用途远不止是调整网络字体。它可以在多种格式之间相互转换；比如 opentype、true type、web 字体、post script 等。结果总体上质量非常高，文件非常大，几乎是 FontSquirrels Basic 版本大小的两倍，是 FontSquirrels Optimal 版本的 7 倍以上。

Regular

  • 泰米尔语SangamMN.svg480 KB
  • 泰米尔语 SangamMN.ttf72 KB
  • 泰米尔语 SangamMN.eot72 KB
  • 泰米尔语SangamMN.woff80 KB
  • 总计：704 KB

Bold

  • 泰米尔语SangamMNbold.svg463 KB
  • 泰米尔语SangamMNbold.ttf69 KB
  • 泰米尔语SangamMNbold.eot70 KB
  • 泰米尔语SangamMNbold.woff80 KB
  • 总计：682 KB

设置CSS

一开始我有点困惑，字体列表中的实际顺序很重要。然后我发现有些采用它认为兼容的第一种格式，而不是坚持使用最佳格式 - 这很糟糕。经过一番实验后，我发现这是格式化 css 的最佳方式（注意文件类型 | 的顺序）重要的！).

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

我的测试结果

常规字体

我确实用*标记了最好的版本

火狐MAC (15.0.1)

  • FontSquirrel Optimal：渲染有点胖
  • FontSquirrel Basic：渲染有点胖
  • FontXChange 4.0：渲染有点肥，但字偶距比 FontSquirrel 版本更好 *

火狐浏览器 (15.0.1)

  • FontSquirrel Optimal：渲染效果非常好
  • FontSquirrel Basic：字体出现锯齿状/不稳定
  • FontXChange 4.0：渲染效果非常好 *

Safari Mac (6.0)

  • FontSquirrel Optimal：完美渲染
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：完美渲染 *

Chrome Mac (21.0)

  • FontSquirrel Optimal：有点胖
  • FontSquirrel Basic：有点胖
  • FontXChange 4.0：完美渲染 *

Chrome 窗口 (21.0)

  • FontSquirrel Optimal：完美渲染
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：完美渲染 *

互联网浏览器 (9.0)

  • FontSquirrel 最佳：完美渲染 *
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：字体出现锯齿/不稳定

粗体字体

火狐MAC (15.0.1)

  • FontSquirrel 最佳：渲染得很胖 *
  • FontSquirrel Basic：渲染得很胖
  • FontXChange 4.0：渲染得很厚，但字距调整更好（我想为 Mac 选择这个，但由于 Windows 版本的 Firefox 不兼容，因此必须选择）

火狐浏览器 (15.0.1)

  • FontSquirrel 最佳：渲染正常，抗锯齿效果不是很好 *
  • FontSquirrel Basic：字体出现锯齿状/不稳定
  • FontXChange 4.0：字体有点扭曲/锯齿状

Safari Mac (6.0)

  • FontSquirrel 最佳：完美渲染 *
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：渲染脂肪

Chrome Mac (21.0)

  • FontSquirrel 最佳：完美渲染 *
  • FontSquirrel Basic：渲染良好，脂肪含量低几个百分点
  • FontXChange 4.0：渲染脂肪

Chrome 窗口 (21.0)

  • FontSquirrel 最佳：完美渲染 *
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：渲染得很胖

互联网浏览器 (9.0)

  • FontSquirrel 最佳：完美渲染 *
  • FontSquirrel Basic：完美渲染
  • FontXChange 4.0：字体出现锯齿/不稳定

最终实现

我通常按​​以下模式组织我的网络字体， / / / 

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

结果的图形概述（全尺寸位于https://i.stack.imgur.com/atb98.png https://i.stack.imgur.com/atb98.png)

结论和任务

没有一种工具可以提供在 Mac 和 Windows 的所有浏览器中都能呈现良好效果的字体。您必须对每种字体进行试验和测试。上面发布的方法只是如何测试和实验 @font-face 的简单方法和建议。

您认为我可以改变我的方法或实现中的任何内容吗？是否有我错过的任何应用程序或服务？

祝一切顺利/T


@font-face代码

你可以加src: local('ò?'),它会查找具有此名称的本地字体，如果本地字体恰好与您的自定义字体同名，则强制浏览器忽略它们。您还可以反过来使用它来限制自定义字体的下载。查看移动支持

我一般会看到?#iefix标准后第二行.eotsrc，虽然我不能说我曾经需要过它，也不知道是否需要特定的定位（除了.eot列在第一位）。

对字体的额外控制

如果您正在寻找在字体加载失败的情况下对字体进行更多控制，或者在 IE 中处理 FOUC，我有一个 jQuery 插件，它可以让您在加载时隐藏字体，并允许您更改字体size on 失败，这样你的后备字体就不会破坏你的布局。如何知道字体（@font-face）是否已经加载？ https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/12316349#12316349

IE6-8错误

此外，IE6-8 的某些字体的 .eot 文件可能存在问题。这可以通过以下任一方式修复（完整指南在这里 https://stackoverflow.com/a/12459447/1455709):

  1. 在线转换新的 .eot 文件。如果这不起作用，则问题出在文件属性本身。
  2. 使用 FontForge 编辑字体文件的名称属性，然后重新保存并重新转换。

CORS

好像只与IE和FF有关。所有其他浏览器（仅测试的最新版本）都没有问题。

CORS 是字体的常见问题，当您从其他域或主机名加载字体时会发生这种问题。这包括指定您的网站www或不。这@font-face代码需要相对引用，CSS文件也是如此。如果定义一个，你也会遇到问题<base>html 中的标记。如果这是不可能的，或者如果您不想担心 CORS，那么您需要将以下代码放在.htaccess字体目录中的文件：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

MIME 类型

字体服务上的 404 问题可能是由不正确的 MIME 定义引起的，请在此处查看更多信息：WOFF 字体的 Mime 类型？ https://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts

移动支持

移动支持非常糟糕。 Android 直到 4.0 才正确支持它，而据我所知，Windows Mobile 根本不支持它。我正在调查任何解决方案或解决方案。到目前为止我最好的就是使用如何知道字体（@font-face）是否已经加载？ https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/12316349#12316349在字体加载失败时显示文本图片。这实际上只适用于网站标题和图标，否则这是一个非常糟糕的解决方案，不利于搜索引擎优化和糟糕的用户体验。

See @font-face支持。 http://caniuse.com/fontface

此外，如果您的 Android 2.2 - x.x.x 版本将会失败@font-face uses local()，它也被用作 IE 的修复程序。如果您想覆盖所有基础，可能需要多个样式表。在这里查看更多内容：https://stackoverflow.com/a/4520467/1455709 https://stackoverflow.com/a/4520467/1455709

SVG 和 Chrome

如果您包含以下内容，Chrome 将不会使用 SVG 字体#fontName在网址中。它还会在 SVG 之前使用 WOFF - 并且不能很好地渲染它。这可能就是为什么每个人都对 Chrome 中蹩脚的字体渲染感到担忧的原因......为了克服这个问题，需要一个额外的 @font-face 声明：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

fonts

fontface

webfonts

自 2012 年底起实施@font-face 的相关文章

随机推荐

热门标签