包括谷歌的Web字体链接或进口？(Including Google Web Fonts link o

什么是包括谷歌的Web字体到网页的首选方式？

1. 通过链接标签？

     <链路HREF = 'HTTP：//fonts.googleapis.com/css家族=贾德森：400,400italic，700' 相对= '样式表' 类型= '文本/ CSS'> 

2. 通过在样式表导入？

     @import URL（http://fonts.googleapis.com/css?family=Kameron:400,700）; 

3. 或者使用Web字体加载器

   https://developers.google.com/webfonts/docs/webfont_loader

Answer 1:

对于案件的90％+你可能想要<link>标签。 作为一个经验法则，你要避免@import规则，因为他们推迟包括资源的加载，直到该文件是牵强..如果你有一个构建的过程，“变平”的@进口的，然后创建另外一个问题网页字体：动态提供商如谷歌网络字体服务字体的特定平台的版本，所以如果你只以内嵌的内容，那么你会在某些平台上破字体结束。

现在，你为什么要使用的Web字体加载程序？ 如果你需要的字体是如何加载的完全控制。 大多数浏览器将按照绘画内容到屏幕上，直到所有的CSS的下载和应用 - 这样就避免了这个问题“的无样式内容闪烁”。 缺点是..你可以有一个额外的暂停和延迟，直到内容是可见的。 随着JS装载机，您可以定义如何以及何时字体变得可见。例如，你甚至可以淡化他们在原始内容在屏幕上画后。

再次，90％的病例是<link>标签：使用一个很好的CDN和字体将回落快，甚至更容易，可以从缓存中。

欲了解更多信息，并进行了深入的看看谷歌Web字体，看看这个GDL视频

Answer 2:

你可以节省一些时间要求

...如果你需要一些额外的编码时间。

这真的没什么大不了的，只是打开谷歌的简化单行链接：

   http://fonts.googleapis.com/css?family=Kameron:400,700

看看它给你：

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

是的，这只是一对夫妇的其他请求。 这是更快地启动这些直接 - 如果你的字体文件下载到自己的服务器和谷歌问题之前添加本地主机URL甚至更快。 我知道，我知道，我们喜欢的CDN和paralell请求，他们是为了更快 - 但只是尝试，看看自己。

现在的原题：不要@import，不要<链接>，只是把这个代码到现有的全局CSS，这是最适合您的服务器。 它不需要加要求，它不是一个单独的举动 - 只将几乎没有什么增加请求的处理时间的文件的大小非常略有增加。 它会看起来很美？ 没有...但你的网站将有希望得到很多比版本更多的请求:)因此，帮助服务器，而不是自己。

总的来说，我认为这是值得额外的努力。

在一个行版本是没有设计成有效的 ，但简单 -谁想要的最简单的方式博客。 你比较清楚。

文章来源: Including Google Web Fonts link or import?