6
Webfonts还是本地加载的字体?
自从使用Cufon带来麻烦之后,我就冒险不使用外部字体资源,但是最近,我一直在寻找替代方法来加载字体,以查看是否有更好的方法。更好的方法有一种突如其来的出现方式。 那里有很多新方法,每种方法似乎都有变化。我应该使用typekit吗?或Google webfonts(使用js或css)?我应该继续使用本地加载的字体(例如fontsquirrel.com生成的方法)吗? 我将在下面列出一些测试方法,这些方法似乎是最受人们欢迎的方法,但是真的值得一试使用webfont吗?似乎它将承担较高的资源负载(http请求),而文件格式类型较少(兼容性较差)等。但是在大多数情况下,文件似乎是异步且高效地加载的。 这只是情况和需求的问题吗?如果是这样,它们是什么? 这些方法之间是否存在巨大差异? 有没有我没有列出的更好的方法? 专业人士的表现/缺点是什么?看?依赖?兼容性? 我确实在这里寻找最佳实践,性能是一件大事,但可伸缩性和易用性也是如此。更不用说,外观和感觉。 Google CSS 仅使用外部样式表 仅使用最小的兼容文件类型 可以使用@import或<link>获取styleshee(@font-face)的内容,并将其直接放入您自己的样式表中。 检测结果 78ms load of html 36ms load of css Google JS方法 用于webfont.js加载样式表 仅使用最小的兼容文件类型 :root用类追加元素 将脚本添加到头部。 检测结果 171ms load of html 176ms load of js 32ms load of css Typekit方法 :root用类追加元素。 可以使用*.js摘要或外部加载的文件*.js文件 使用data:font/opentype代替字体文件。 将脚本添加到头部 将嵌入式CSS添加到头部 将外部样式表添加到头部 您可以从typekit.com轻松添加/删除/调整字体和目标选择器 …