相关疑难解决方法(0)

自从使用Cufon带来的麻烦以来,我冒险使用外部字体资源,但是最近,我一直在寻找替代方法来加载字体以查看是否有更好的方法; 更好的方法有一种突然出现的方式.

那里有很多新的方法,并且每种方法看起来都有变化; 我应该使用typekit吗？或google webfonts(使用js或css)？我应该继续使用本地加载字体(例如fontsquirrel.com生成的方法)吗？

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

1. 这只是一个情况和需要的问题吗？如果是这样,他们是什么？
2. 这些方法之间是否存在巨大差异？
3. 我还没有列出更好的方法吗？
4. 性能方面的专业人士/骗子是什么？看？依赖呢？兼容性？

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

谷歌CSS

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

检测结果

  78ms load of html
  36ms load of css

Run Code Online (Sandbox Code Playgroud)

Google JS方法

• 用于webfont.js加载styleshet
• 仅使用最小的兼容文件类型
• :root用类附加元素
• 将脚本添加到头部.

检测结果

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

Run Code Online (Sandbox Code Playgroud)

Typekit方法

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

• 将外部样式表添加到头部

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

检测结果

  169ms load of html
  213ms load …

Run Code Online (Sandbox Code Playgroud)