字体显示方案

codeGoogle 发布于2019-08-29 11:08 / 1010人阅读

摘要：浏览器默认方案浏览器加载字体完成之前，文本默认是不显示的，这种情况通常叫做。具体浏览器是怎么弄的，参考在指定字体加载完成前用字体先为相应的元素设置字体然后用监听字体加载，在加载完成的时候可以为相应的元素添加新的解决方案相关阅读使用

此文系读 font-display 后感，原发在 issues blog 里面。

浏览器默认方案

浏览器加载字体完成之前，文本默认是不显示的，这种情况通常叫做 FOIT。这种方案的好处是不会经历一个 fallback 字体 -> 指定字体的一个跳转，缺点是在网络差的情况下会有一段时间的空白。默认情况下大多数浏览器会等 3 秒钟，如果 3 秒钟之后还是渲染不出来就转而选择 fallback 字体，其中 safari 可能会等得更久，在没有网络的情况下，文本压根就不渲染了(因为字体加载不出来)。具体浏览器是怎么弄的，参考 Differences in Font Rendering Today

在指定字体加载完成前用 fallback 字体

先为相应的元素设置字体：

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

.font-loaded p {
  font-family: "Open Sans Regular";
}

然后用 fontfaceobserver 监听字体加载，在加载完成的时候可以为相应的元素添加 class:

const font = new FontFaceObserver("Open Sans Regular");
const p = document.querySelector("p")
font.load().then(function () {
  p.classList.add("font-loaded")
})

新的 CSS 解决方案

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
  font-display: swap;
}

auto: The default value. The typical browser font loading behavior will take place, which is to hide typefaces that use custom fonts, and then display the affected text when fonts finish loading.

swap: The fallback text is shown immediately until the custom font loads. In most cases, this is what we"re after. JavaScript-driven font loading solutions almost always aim to emulate this setting.

fallback: This is sort of a compromise between auto and swap. There will be a short period of time (100ms according to Google) that text styled with custom fonts will be invisible. The unstyled text will then appear (if the custom font hasn"t already loaded by this point.) Once the font loads, the text is styled appropriately.

optional: Operates exactly like fallback in that the affected text will initially be invisible for a short period of time, and then transition to a fallback font. The similarities end there, though. The optional setting gives the browser freedom to decide whether or not a font should even be used, and this behavior hinges on the user"s connection speed. On slow connections, you can expect that custom fonts may not load at all if this setting is used.

相关阅读

Controlling Font Performance with font-display- Google developers

使用 Google Fonts

私有云专线服务字体效果不能显示 html让字体不显示 html竖着显示字体服务器上字体显示乱码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111447.html

一种不完美的网页字体异步加载方法

摘要：在字体的过程中，先用一种最接近目标字体的安全字体来显示，等字体文件加载完后进行替换。第个方案是一种迫不得已的选择，在用户眼皮底下更换字体，是非常影响体验的，好处是字体属于异步加载，不会阻塞文本显示。问题最近在做一个项目时，遇到了这样一个问题：网页大标题要用设计师指定的中文字体，该字体文件比较大，浏览器加载字体文件的过程中是不会显示使用该字体的文本的，于是出现了初次打开网页时有一段时...

ddongjian0000 2019-08-05 17:44 评论0 收藏0
一种不完美的网页字体异步加载方法

摘要：在字体的过程中，先用一种最接近目标字体的安全字体来显示，等字体文件加载完后进行替换。第个方案是一种迫不得已的选择，在用户眼皮底下更换字体，是非常影响体验的，好处是字体属于异步加载，不会阻塞文本显示。问题最近在做一个项目时，遇到了这样一个问题：网页大标题要用设计师指定的中文字体，该字体文件比较大，浏览器加载字体文件的过程中是不会显示使用该字体的文本的，于是出现了初次打开网页时有一段时...

xiaokai 2019-08-26 10:27 评论0 收藏0
粗暴的方式，替换全局字体

摘要：本篇会先介绍两种比较粗暴的方式来修改全局的字体。在这个的方法里，回去判断是否继承自，如果是就替换字体。从下期开始，就会开始介绍一些更优雅的方式，在现有项目上，全局的替换字体的一些方案。 showImg(https://segmentfault.com/img/remote/1460000011401721?w=500&h=330); 序在 Android 下使用自定义字体已经是一个比...

Worktile 2019-06-25 11:37 评论0 收藏0
python matplotlib 中文显示参数设置

摘要：最近在学习著名的绘图包时发现，有时候图例等设置无法正常显示中文，于是就想把这个问题解决了。原因大致就是库中没有中文字体。最近在学习python著名的绘图包matplotlib时发现，有时候图例等设置无法正常显示中文，于是就想把这个问题解决了。 PS：本文仅针对Windows，其他平台仅供参考。原因大致就是matplotlib库中没有中文字体。1我安装的anaconda，这是对应的...

Pocher 2019-07-25 10:23 评论0 收藏0
python matplotlib 中文显示参数设置

摘要：最近在学习著名的绘图包时发现，有时候图例等设置无法正常显示中文，于是就想把这个问题解决了。原因大致就是库中没有中文字体。最近在学习python著名的绘图包matplotlib时发现，有时候图例等设置无法正常显示中文，于是就想把这个问题解决了。 PS：本文仅针对Windows，其他平台仅供参考。原因大致就是matplotlib库中没有中文字体。1我安装的anaconda，这是对应的...

Ethan815 2019-06-26 15:30 评论0 收藏0