【问题标题】:What font format should I use for my site我的网站应该使用什么字体格式
【发布时间】:2015-06-01 11:19:15
【问题描述】:

我想为我的网站使用一种字体,我进行了整体研究并发现了多种字体格式,现在我想知道标准格式是什么? 或者标准格式是什么?

.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)

到目前为止,我已经使用了所有这些格式,如下所示:

@font-face {
    font-family: 'Font';
    src: url('Font.eot'); /* IE9 Compat Modes */
    src: url('Font.eot?#') format('eot'), /* IE6–8 */
         url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
         url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('Font.otf') format('opentype'),
         url('Font.svg') format('svg');
}

但是在这种情况下,网站太重了(所有格式的大小都差不多1MB),那么我应该怎么做才能更优化呢?

【问题讨论】:

  • 您可以将 .ttf 用于所有其他浏览器,将 .eot 用于 Internet 浏览
  • Web 编程并不是要考虑和实施所有可以找到的替代方案。专注于你的目标:支持相关的浏览器。像 IE6-9 这样的东西当然可以忽略。使用 one 格式,woff 或 ttf 就是这样。不符合这些的浏览器不值得支持。
  • @priya786 你说的是 .ttf 和 .eot 吗?
  • 是的,我只是希望你只使用这两种格式
  • @arkascha 有帮助..!!谢谢。

标签: css fonts


【解决方案1】:

了解字体文件类型

  • WOFF / WOFF2

WOFF 字体通常比其他格式加载得更快,因为它们使用 OpenType (OTF) 和 TrueType (TTF) 字体使用的结构的压缩版本。

  • SVG / SVGZ

非常适合移动使用

  • EOT

仅受 IE 支持

  • OTF/TTF

WOFF 格式最初是作为对 OTF 和 TTF 的反应而创建的,部分原因是这些格式很容易(并且非法)被复制

  • 在另一边:

Google Fonts 提供了这种方式来使用他们的字体。

  • 一些性能提示

查看文件大小

字体可能会非常重,因此请倾向于提供较轻版本的选项。例如,喜欢 50KB 的字体集而不是 400KB 的字体集。 尽可能限制字符集

您真的需要一种字体的粗体和黑色粗细吗?将字体集限制为仅加载使用的字体是个好主意,这里有一些很好的提示。 考虑小屏幕的系统字体

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

在此示例中,小于 1000 像素的屏幕将改为使用系统字体,而宽及以上的屏幕将使用自定义字体。

  • 结论: 对桌面屏幕使用 OTF/TTF(所有浏览器)和 EOT(IE),对小屏幕使用系统字体,因为它们渲染速度更快。 并考虑谷歌字体。迄今为止的最佳选择。

【讨论】:

  • 有帮助的朋友,请编辑您的答案并告诉我您的报价是什么? tnx 朋友
  • 那是对的?! ttfeotsvg(适用于移动设备)
  • 你说得对,我的朋友。 Infact svg 格式是 iOS 版 Safari 4.1 及以下版本唯一允许的格式。 Firefox、IE 或 IE Mobile 目前不支持 SVG 字体。 Firefox 已无限期推迟实施以专注于 WOFF。
  • 没有。移动浏览器会查找其兼容的字体类型,然后加载到用户设备上。
  • 你不需要。好吧,这没有意义,两者都用。 otf 比 ttf 更新。使用 otf 优于 ttf 的好处是重量轻。
【解决方案2】:

我刚刚测试了 chrome (43) 和 firefox (37) 和 ie (10) - 在所有情况下,仅下载了五种字体格式中的一种(分别为:woff、woff 和 eot)。基于这个小样本,似乎*在您的 @font-face 声明中包含各种文件类型不会对用户产生负面影响。
*如果您碰巧知道其他浏览器的行为方式,请告诉我们。

【讨论】:

  • +1 用于您的测试。但是一个好的 web 开发者不会只检查最好的浏览器,你还应该测试一些浏览器,比如 ie 7
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-08
  • 1970-01-01
  • 2010-12-17
  • 2012-02-26
  • 1970-01-01
  • 2011-09-30
相关资源
最近更新 更多