css - 不同的浏览器以不同的方式呈现我的网站字体

时间：2018-10-17 18:40:16

标签： css twitter-bootstrap

我在网页中的一个按钮上使用了 Avenir Black 字体。但是Chrome和Microsoft Edge的显示方式有所不同。

即使我已经清除了两者的缓存并在两种浏览器中检查了网页，控制台中也没有错误，并且字体为Avenir Black。那么，有人知道原因吗？我已经在代码中附加了输出的快照。

文本编辑器中的按钮代码

Button Code in the text editor

我如何导入字体 How I import fonts

Chrome检查元素 Chrome Inspect element

边缘检查元素 Edge inspect element

我如何链接字体文件 How I linked the fonts file

答案 0 :(得分：0)

这是因为您只是将一种格式（ttf）用于所需的字体，而并非所有的网络浏览器都可以读取。您可以阅读本文以获取更多信息。然后，您将找出如何以一种非常简单的方式解决此问题！

但是，在所有浏览器和浏览器版本中均不支持单一字体格式。几乎所有最新的Web浏览器（opera mini除外）都支持TTF和WOFF文件格式。作为开发人员，如果您使用TTF和WOFF Web格式，将会使您的生活变得更加轻松。但是，仍然需要将字体格式组合在一起，以使所有浏览器都支持所有字体。