包括谷歌Web字体链接或导入？ [英] Including Google Web Fonts link or import?

问题描述

通过链接标记

1. 什么是将Google Web Fonts包含到页面的首选方式？

   < link href ='http：//fonts.googleapis.com/css？family = Judson：400,400italic，700'rel ='stylesheet'type =' text / css'> 




2. 通过样式表中的导入？
   
   

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




3. 或使用网络字体加载器

   
   
   

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

90％以上可能需要< link> 标记的情况。作为一个经验法则，你要避免 @import 规则，因为它们推迟了包含的资源的加载，直到文件被提取。如果你有一个构建过程扁平@导入，然后你创建另一个问题与webfonts：动态提供者，如谷歌WebFonts服务于平台的特定版本的字体，所以如果你只是内联的内容，那么最终会在一些平台上打破字体。 / p>



现在，为什么要使用Web字体加载器？如果您需要完成控制字体的加载方式。大多数浏览器将推迟到屏幕上绘制内容，直到所有的CSS下载和应用 - 这避免了无风格内容的闪光的问题。缺点是..你可能有一个额外的暂停和延迟，直到内容可见。使用JS加载器，您可以定义字体的显示方式和时间。例如，您甚至可以在屏幕上显示原始内容后将其淡入。





再次，90％的情况是< link> 标签：使用一个很好的CDN，字体会快速下降，甚至更可能，缓存。





欲了解更多信息，并深入了解谷歌Web字体，看看这个GDL视频：
https://www.youtube.com/watch?v=sqesm0euf9M




What is the preferred way of including Google Web Fonts to a page?

1. via the link tag?

   <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

2. via import in a stylesheet?

   @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

3. or use the web font loader

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

解决方案

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with webfonts: dynamic providers like Google WebFonts serve platform specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video: https://www.youtube.com/watch?v=sqesm0euf9M

这篇关于包括谷歌Web字体链接或导入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！