如何识别浏览器呈现的字体

Question

我有一个像

这样的CSS

body ,html ,* {
font-family: "MyTest1","MyTest2","Helvetica Neue","Helvetica","Arial",sans-serif !important;
}

如何从上面的字体中识别出哪个浏览器终于​​呈现了页面？

Answer 1

您可以在“元素”标签中的Chrome开发者工具中查看，而在底部则是“渲染字体”。

Answer 2

在browser developer option可用

中

inspect element使用mouse right click或F12功能键，您可以在font

中查看哪个Elements option适用

Answer 3

在控制台中记录此信息的方法是使用window.getComputedStyle()。

示例：

＆＃13;

＆＃13;

var text = document.querySelector('.hello-world');
var style = window.getComputedStyle(text)
console.log(style.fontFamily)

＆＃13;

.hello-world {
  font-family: Verdana, Arial, sans-serif;
}

＆＃13;

<p class="hello-world">Hello, world!</p>

＆＃13;

＆＃13;

＆＃13;