Question

我有一个内联样式的段落，如下所示：

<p style="font-family:georgia,garamond,serif;">

我的问题是，有没有办法找出我的页面使用哪种字体以及选择程序是什么？

Answer 1

开发工具

打开开发工具并查找计算样式，您可以看到正在应用的样式以及包含字体的位置。

Chrome： https://developers.google.com/web/updates/2013/09/DevTools-answers-What-font-is-that
Firefox： https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/View_fonts

使用font-family属性定义字体。您的浏览器将从第一个字体开始（从左向右移动）查看此字体列表，并检查字体在用户计算机上是否可用，或者通过规则@font-face查看。如果找到了字体，它将加载它，如果没有，它会移动到下一个再试一次。

使用JavaScript获取计算字体

var el = document.getElementById("id");
var style = window.getComputedStyle(el, null).getPropertyValue("font-family");

JSFiddle

请参阅MDN ...

Answer 2

在浏览器中，在该页面上，点击 F12 。您应该看到CSS的一个部分。你寻找的确切取决于你的浏览器。

Answer 3

浏览器将按照放置字体的顺序渲染字体。例如，在你的代码中，第一个要尝试的字体是Georgia，那么如果设备或浏览器不支持它，那么它将继续尝试Garamond，而且最后它将使用任何serif字体浏览器和设备可以支持。

CSS定义了一个名为font-family的属性，该属性包含一个有序的字体列表。应该按顺序尝试这些字体无论是字体本身的可用性，还是可用性用于绘制当前文本的字形。1

浏览器在Chrome中使用哪种字体命中Crtl + Shift + I，如果点击下方html中的元素，它将显示在页面上呈现的样式。

要使用javascript获取渲染元素，请参阅this answer

Article explain font selection by a browser

Answer 4

尝试这个

它将获得将在style

中使用的字体名称

＆＃13;

//using id

var b = document.getElementById("p").style.fontFamily;
console.log(b);

//or using jquery tag selecter

console.log($("p").css('fontFamily'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p" style="font-family:georgia,garamond,serif;">

＆＃13;

找出使用的字体

4 个答案: