个人中心
gpt4 book ai didi

javascript - Webfonts 或本地加载的字体？

转载 作者：IT王子 更新时间：2023-10-29 02:43:59 27 4
gpt4 key购买 nike

自从使用 Cufon 带来的麻烦后，我就开始尝试不使用外部字体资源，但最近，我一直在寻找加载字体的替代方法，看看是否有更好的方法;更好的方法有一种突然出现的方法。

那里有很多新方法，而且每种方法似乎都有变体；我应该使用 typekit 吗？或 google webfonts(使用 js 或 css)？我应该继续使用本地加载字体(例如 fontsquirrel.com 生成的方法)吗？

我将在下面列出似乎最受欢迎的方法，并进行一些测试，但是真的值得转向网络字体吗？它似乎会承载更高的资源负载(http 请求)并且具有更少的文件格式类型(更少的兼容性)等。但看起来在大多数情况下文件是异步加载且高效的。

  1. 这只是情况和需要的问题吗？如果有，它们是什么？
  2. 这些方法之间是否存在显着差异？
  3. 有没有我没有列出的更好的方法？
  4. 性能的优缺点是什么？看？依赖？兼容性？

我真的在这里寻找最佳实践，性能很重要，但可扩展性和易用性也很重要。更不用说，外观和感觉。

谷歌 CSS

  • 只使用外部样式表
  • 只使用最小的兼容文件类型
  • 可以使用@import或 <link>或者将样式表 ( @font-face ) 的内容直接放入您自己的样式表中。

测试结果

  78ms load of html
  36ms load of css

enter image description here

Google JS 方法

  • 使用webfont.js加载样式表
  • 只使用最小的兼容文件类型
  • 附加:root类元素
  • 将脚本添加到头部。

测试结果

    171ms load of html
    176ms load of js
    32ms load of css

enter image description here

Typekit 方法

  • 附加:root具有类的元素。
  • 可以使用*.js片段或外部加载的文件 *.js文件
  • 使用data:font/opentype而不是字体文件。
  • 将脚本添加到头部
  • 将嵌入式 CSS 添加到头部

  • 向头部添加外部样式表

    您可以从 typekit.com 轻松添加/删除/调整字体和目标选择器

测试结果

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

enter image description here

…& Font Squirrel 方法

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

……或者用数据:字体方法……

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

最佳答案

首先，我将澄清一些有关 Google 产品的信息。它实际上会加载您的浏览器可以处理的最小格式。 WOFF 提供较小的文件大小，并且您的浏览器支持它，因此您看到的就是它。 WOFF 也得到相当广泛的支持。但是，例如在 Opera 中，您可能会获得字体的 TrueType 版本。

我相信，文件大小逻辑也是 Font Squirrel 以该顺序尝试它们的原因。但这主要是我的猜测。

如果您在每个请求和字节都很重要的环境中工作，则必须进行一些分析以找出最适合您的用例的环境。人们会不会只浏览一个页面，就再也不会访问了？如果是这样，缓存规则就没有那么重要了。如果他们正在浏览或返回，Google 的缓存规则可能比您的服务器更好。延迟是更大的问题，还是带宽？如果存在延迟，请以更少的请求为目标，因此将其托管在本地并尽可能合并文件。如果带宽，请选择以最小代码和最小字体格式结束的选项。

现在，关于 CSS 与 JS 的考虑。让我们看一下下面的 HTML 片段:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

在许多情况下，script1、style1 和 style2 会阻塞。这意味着浏览器无法继续显示该资源，直到该资源已加载(尽管现代浏览器稍微捏造了这一点)。这实际上是一件好事，尤其是对于样式表。它可以防止无样式内容的闪现，还可以防止在应用样式时发生的巨大转变(对于用户来说，转变内容真的很烦人)。

另一方面，script2 不会阻塞。它可以稍后加载，浏览器可以继续解析和显示文档的其余部分。所以这也是有益的。

特别是关于字体(更具体地说，是 Google 的产品)，我可能会坚持使用 CSS 方法(我喜欢 @import 因为它使用样式表保持样式，但这可能只是我)。脚本 ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) 加载的 JS 文件比 @font-face 声明大，只是看起来需要做更多的工作。而且我不认为加载实际字体本身(WOFF 或 TTF)是阻塞的，所以它不应该延迟太多。我个人不是 CDN 的 super 粉丝，但事实是它们真的很快。 Google 的服务器将以压倒性优势击败大多数共享托管计划，而且由于它们的字体非常受欢迎，人们甚至可能已经将它们缓存起来。

这就是我所拥有的。

我没有使用 Typekit 的经验，因此我将其排除在理论化之外。如果有任何不准确的地方，为了论证不计算浏览器之间的泛化，请指出。

关于javascript - Webfonts 或本地加载的字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22116682/

27 4 0
文章推荐： android - 在 android 布局中添加 GIF
文章推荐： javascript - 在页面加载时将焦点设置在 HTML 输入框上
文章推荐： c# - 禁止 XmlSerializer 发出空值类型
文章推荐： javascript - 如何在用户将图像滚动到 View 中时动态(或延迟)加载图像
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com