【问题标题】:Are eot, ttf, and svg still necessary in the font-face declaration?font-face 声明中是否还需要 eot、ttf 和 svg?
【发布时间】:2016-07-06 10:28:17
【问题描述】:

到目前为止,我使用的是 Paul Irish 的 bulletproof font-face syntax

但我只是在caniuse 上查看对 .woff 和 .woff2 文件的支持,它说 IE9+ 支持 woff。大多数关于这个主题的文章都来自 2009 年左右,而在撰写本文时已经是整整 7 年前。当 woff 现在得到如此广泛的支持时,我们真的需要继续声明 ttf、otf、eot 和 svg 吗?

【问题讨论】:

    标签: css fonts font-face woff woff2


    【解决方案1】:

    2018 年 10 月编辑

    tl;dr:使用 WOFF2,每个现代浏览器都支持它,使用 WOFF 后备,因为 IE11 不会死(更新:它最终的 EOL 日期是 2022 年 6 月 15 日),并且没有 em> local() 源指示符,因为您希望每个人都使用相同的字体,而不是“碰巧使用相同名称的不同版本甚至完全不同的字体”。

    结束。

    2016 年原始答案

    简短回答:不。

    EOT 仅与 IE8 及以下版本相关(尽管作为琐事:一直到 IE4。IE 实际上开创了 webfonts),以及作为技术的 SVG 字体(不要与 OpenType 字体混淆SVG 轮廓)were abandoned (in early 2015) 因为一旦真正的网络字体开始变得可用,这些限制就变得疯狂了。截至 2016 年you just need WOFF。 WOFF2 如果您想利用 only just 成为 w3 推荐的更新更好的 WOFF 版本(在此答案时)。

    为了让事情更简单,as of January 12th 2016, Microsoft ceased support for IE8 and below,对 IE9 的支持有限:他们现在将只支持每个仍然支持的操作系统的最新可用浏览器,这意味着 Windows XP 不再支持 IE9,因为 XP 本身不再支持,但在 Vista SP2 和 Server 2008 R2 分别在 2017 年和 2020 年结束扩展支持之前,技术上仍然受到支持。当然,对于 Windows Server 2008,webfont 支持是无关紧要的,而且大多数仍在使用旧版本 Windows 的企业都跳过了 Vista,要么使用 Windows XP(自担风险),要么使用 Windows 7(我们几乎可以期待所有这些都成为2016 年 7 月的 Windows 10,其中第 29 个是 the last date 人们可以从 7/8.1(但不是 8)免费升级到 10)。

    (2017 年 4 月编辑:Windows Vista SP2 本月停止支持,因此现在正式不再支持 IE9)

    至于 TTF/OTF,您不想在线使用这些,就像您不想使用 TIFF 图像而不是 JPG 或 PNG:即使 WOFF“只是”围绕 TTF/OTF 数据的薄包装器, WOFF/WOFF2 允许压缩数据,而普通 OpenType 不允许。

    此外,TTF/OTF 是通用字体(适用于支持 OpenType 的系统),因此需要更多地检查其正确性,尤其是 IE 版本。使用 WOFF,它作为文件类型明确表示这是一个 Web (Open) Font (Format),一种不那么严格的审查形式意味着某些无法通过系统 OpenType 验证通过的字体可能仍然可以像 webfonts 一样正常工作(因为并非所有必需的通用 OpenType 数据对于字体来说都是必需的)仅在网络环境中工作)。

    最后,您可以选择 WOFF 格式:格式 1,简称为 WOFF,是较旧的格式,使用基于 deflate 的压缩,类似于 PNG 压缩;格式 2,称为 WOFF2,是基于 brotli 算法压缩的较新格式,并且还允许在处理支持多种语言的 unicode 字体时将字体“分割”到单独的文件中以优化交付。您不需要同时使用所有文件,因此只提供覆盖特定页面所需 unicode 范围的文件,并且您可以将页面大小和加载时间进一步缩短。

    结论:为进步而欢呼,只需使用 WOFF(或 WOFF2)。

    当然,请记住使用 format() 值指明您的 @font-face 来源的格式。

    【讨论】:

    • 是的,我会支持这个概念。我能想到的唯一现实的例外是,如果您有一些不支持 WOFF 的旧嵌入式系统/浏览器的封闭信息亭类型的东西,无法升级并且使用自定义字体进行演示至关重要。但是你有两个问题(至少):-)
    • 我需要注意的是 Android 浏览器,它最近才支持 WOFF。为此(诚然只有 0.6% 的使用率),我可能会保留 TTF。对于这些例外情况,还值得考虑该字体是否已经在设备上。例如materializecss.com 将 Roboto 提供为 WOFF、WOFF2、EOT 和 TTF,但在 Android 的情况下,我可以依赖它已经可用于 Android 4.0 及更高版本(尽管并非所有 Roboto 都相同 - 它已在 Android 5.0 中进行了修订)。
    • Android 目前已经支持三个主要版本的 WOFF,4 个中有一半(4.4.3 及以上有稳定的 WOFF 支持,4.4.2 及以下不支持)。
    【解决方案2】:

    我决定发布我自己的答案有两个原因:当前接受的答案对于在现代 Web 开发中使用 WOFF2 和 WOFF 字体堆栈有点过分热心,而没有提及其他因素,并且它也严重指向官方结束 -生命日期,它不能反映现实世界中实际使用的浏览器版本。在这个答案中,我将采购 CanIUse.com,这是一个跟踪此类事件的行业标准。

    支持 WOFF2

    WOFF2 在 WOFF 的各个方面都得到了改进,2014 年之后发布的大多数桌面浏览器都支持它,但仅自 2018 年起才开始被大多数移动浏览器支持。 估计全球 93% 的浏览器都支持它。

    支持 WOFF

    WOFF 开始在 IE9(2011 年发布)中得到 Internet Explorer 的支持,这使得 EOT 格式对于自 2011 年以来发布的 IE 版本已经过时。估计 97% 的人支持它全球浏览器。

    其他桌面浏览器大致同时开始支持 WOFF,包括 Firefox 3.6 之后的 Firefox、Chrome 5 之后的 Chrome、5.1 之后的 Safari(分别于 2010 年、2011 年和 2011 年发布),呈现 TTF 和 OTF 1 格式在以前的版本中已过时。自 2013 年以来,大多数移动浏览器都支持 WOFF。

    注意事项和结论

    从这个角度来看,很容易将所有其他格式视为不必要的,但不再正式支持的软件从来都不是它不再被使用的良好指标。换句话说,全球浏览器版本共享完全不能保证代表您的网站将被使用的人口统计数据。

    浏览器版本份额在不同的人口统计数据中可能会有很大差异:国家、社会阶层和收入等因素都会严重影响用户使用的设备(以及浏览器版本)。作为开发人员,请考虑您正在构建的网站是否会被更有可能使用这些旧版本的人口统计数据使用。

    如果您决定是这种情况,并且您需要支持早于 2011 年的桌面浏览器或早于 2013 年的移动浏览器,请使用完整的字体堆栈:WOFF2、WOFF、TTF(或 OTF)和 EOT。

    如果您不需要支持那些古老的浏览器,而且您确实很可能不需要,那么从这里开始,只需使用 WOFF2 和 WOFF 作为您的字体堆栈。


    (1) TTF 和 OTF 是传统的桌面字体格式,任何支持一种的浏览器都支持另一种,所以千万不要同时使用这两种格式

    【讨论】:

    【解决方案3】:

    这更像是 2019 年的附录。在 2019 年 9 月 18 日这一点上,仍然有大量使用 IE11,更不用说其他更过时的软件了。

    因此,在一年前的最新编辑中,被接受的最高投票答案是错误,您只需要 woff2。至少你需要 woff2 和 woff,你可能想要一个更通用的备份选项,即使它不像 svg 那样理想。

    虽然您当然应该首先首先加载和支持 woff2,但遗留支持只是生活中的一个事实,您可能在未来几年内都无法摆脱 only woff2专业的努力。

    最全面的现代选项可能是 woff2,作为后备的 woff,以及 IE 的 eot。这会影响 2019/2020 年所有重要用途的所有浏览器

    例子:

    @font-face {
      font-family: "yourFontHere";
      font-style: normal;
      font-weight: 400;
      font-display: block;
      src: url("../fonts/yourFontHere.eot");
      src: url("../fonts/yourFontHere.eot?#iefix") format("ie9-skip-eot"),
      url("../fonts/yourFontHere.woff2") format("woff2"),
      url("../fonts/yourFontHere.woff") format("woff");
    }
    

    这是一个普通的综合字体声明的样子。

    请参阅以下内容:EotWoffWoff2

    这涵盖了除 Opera Mini 之外的所有内容,坦率地说,它比 IE 6-8 更不值得支持,因为它既是支持的噩梦,又很少使用。

    但是,如果您不同意此评估,您可以根据需要添加额外的后备行,就像 woff 行一样。在上面的示例中添加 svg 格式不仅支持所有浏览器,而且还有一个论据可以将其包含在可访问性目的中。见这里:Accessibility example

    【讨论】:

    • 这应该只是一个评论,所以我可以编辑我的答案以包含完全正确的观察。我已经更新了答案以将其包含在 tl;dr
    • 很遗憾,我不能将 cmets 留在其他答案上。
    • 我不同意您的回答目前包含或过去曾经包含足够的相关信息来完整准确地回答 OP 问题而没有明显的不合理偏见。
    • 它实际上并没有这样做。
    • “但为了可访问性的目的,也有理由将其包含在内”——对于为什么要链接到该演示文稿感到困惑。我不是通过网络字体询问图标...
    猜你喜欢
    • 1970-01-01
    • 2010-11-29
    • 2014-10-26
    • 1970-01-01
    • 2013-02-16
    • 2017-07-19
    • 2013-08-21
    • 2013-05-20
    • 2011-12-06
    相关资源
    最近更新 更多