Javascript Webfonts还是本地加载的字体？_Javascript_Css_Fonts_Webfonts

Javascript Webfonts还是本地加载的字体？

javascript css fonts

Javascript Webfonts还是本地加载的字体？,javascript,css,fonts,webfonts,Javascript,Css,Fonts,Webfonts,自从使用Cufon带来的麻烦之后，我就不再使用外部字体资源，但最近，我一直在寻找加载字体的替代方法，看看是否有更好的方法；更好的方法有一种突然出现的方式现在有很多新的方法，每种方法似乎都有所不同；我应该用打字机吗？还是google webfonts（使用js或css）？我是否应该继续使用本地加载字体（例如fontsquirrel.com生成的方法）我将在下面列出最受欢迎的方法，并进行一些测试，但它真的值得转向webfont吗？它似乎会承载更高的资源负载（http请求）和更少的文件格式类型（兼

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

现在有很多新的方法，每种方法似乎都有所不同；我应该用打字机吗？还是google webfonts（使用js或css）？我是否应该继续使用本地加载字体（例如fontsquirrel.com生成的方法）

我将在下面列出最受欢迎的方法，并进行一些测试，但它真的值得转向webfont吗？它似乎会承载更高的资源负载（http请求）和更少的文件格式类型（兼容性较差）等等。但在大多数情况下，文件似乎是异步加载的，并且效率很高

这只是形势和需要的问题吗？如果是，它们是什么

这些方法之间有很大的区别吗

有没有更好的方法我没有列出

性能的优缺点是什么？看？依赖关系？相容性

我在这里寻找最佳实践，性能是一件大事，但可扩展性和易用性也是如此。更不用说，外观和感觉了

谷歌CSS

仅使用外部样式表
仅使用最小的兼容文件类型
可以使用
```
@import
```
或
或获取样式表（
```
@font-face
```
）的内容，并将其直接放入您自己的样式表中

测试结果

谷歌JS方法

使用
```
webfont.js
```
加载样式表
仅使用最小的兼容文件类型
用类附加
```
：根元素
```


将脚本添加到头部


测试结果


类型工具包方法

用类追加：根元素

可以使用*.js
代码段或外部加载的文件*.js
文件
使用数据：font/opentype
代替字体文件
将脚本添加到头部
将嵌入的css添加到头部
将外部样式表添加到头部
您可以从typekit.com轻松添加/删除/调整字体和目标选择器

测试结果


…&字体松鼠方法
…或使用数据：字体方法
@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;

}

首先，我要澄清一下谷歌的产品。它实际上将加载浏览器能够处理的最小格式。WOFF提供小文件大小，并且您的浏览器支持它，因此它就是您看到的那个。WOFF也得到了相当广泛的支持。然而，例如在Opera中，您可能会得到字体的TrueType版本
我相信，文件大小逻辑也是FontSquirrel按顺序尝试它们的原因。但这主要是我的猜测
如果您在一个每个请求和字节都计数的环境中工作，那么您必须进行一些分析，以找出哪个最适合您的用例。人们会只浏览一页，而不再访问吗？如果是这样，缓存规则就没有那么重要了。如果他们正在浏览或返回，谷歌可能比你的服务器有更好的缓存规则。延迟是更大的问题，还是带宽？如果需要延迟，则以较少的请求为目标，因此在本地托管它并尽可能多地合并文件。如果选择带宽，则选择以最小代码和最小字体格式结束的选项
现在，我们来谈谈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>


@导入url（style2.css）；
（功能（）{
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）；
})();

在许多情况下，script1
、style1
和style2
会被阻塞。这意味着在加载资源之前，浏览器无法继续显示文档（尽管现代浏览器对此有点含糊其辞）。这实际上是一件好事，尤其是对于样式表。它可以防止未设置样式的内容闪现，还可以防止在应用样式时发生巨大的变化（而改变内容对于用户来说真的很烦人）
另一方面，script2
不会被阻塞。它可以稍后加载，浏览器可以继续解析和显示文档的其余部分。因此，这也是有益的
特别是说到字体（更具体地说，是谷歌的产品），我可能会坚持使用CSS方法（我喜欢@import
，因为它保持样式表的样式，但这可能只是我自己）。脚本（）加载的JS文件比@font-face
声明要大，看起来需要做很多工作。我不认为加载实际字体本身（WOFF或TTF）是阻塞的，所以它不应该延迟太多时间。我个人并不是CDN的超级粉丝，但事实是CDN的速度非常快。谷歌的服务器将以压倒性优势击败大多数共享主机计划，而且由于它们的字体如此流行，人们甚至可能已经将其缓存
这就是我所拥有的一切
我没有使用Typekit的经验，所以我把它排除在理论之外。如果有任何不准确的地方，不包括浏览器之间的泛化，请指出。
我个人使用谷歌字体。他们有各种各样的选择，最近也有。谷歌正在努力使网络更快，所以我想这方面的更多优化也将来自他们
无论您选择何种外包字体交付，您都将
  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

@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;

}

<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>

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

@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 */
  }

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>