我有一个带内联样式的段落,如下所示:
<p style="font-family:georgia,garamond,serif;">
有没有一种方法可以找出我的页面正在使用哪种字体,以及选择过程是什么?
我有一个带内联样式的段落,如下所示:
<p style="font-family:georgia,garamond,serif;">
开发工具
打开开发工具并查找计算样式,您可以看到应用了哪些样式以及它们的位置...包括字体。
使用font-family
属性定义字体。您的浏览器将查看此字体列表,从左到右开始(逐个检查),并检查字体是否可用于用户计算机或通过@font-face
规则。如果找到该字体,则加载它,否则,继续尝试下一个。
使用JavaScript获取计算字体
var el = document.getElementById("id");
var style = window.getComputedStyle(el, null).getPropertyValue("font-family");
查看MDN...
在您的浏览器中打开该页面后,按下F12。您应该会看到一个CSS部分。但具体查找位置取决于您使用的浏览器。
浏览器将按照你放置字体的顺序进行渲染。例如,在您的代码中,将首先尝试使用Georgia字体,然后如果设备或浏览器不支持它,将尝试使用Garamond字体,最后将使用浏览器和设备支持的任何衬线字体。
CSS定义了一个名为font-family的属性,其中包含一个有序的字体列表。这些字体应该按顺序尝试,同时查找字体本身的可用性以及绘制当前文本所需的字形的可用性。1
要查看Chrome浏览器使用的字体,请按Crtl + Shift + I,如果您在下面的HTML元素中单击样式,则会显示页面上正在呈现的样式。
要使用javascript获取呈现的元素,请参见this answer
window.getComputedStyle(document.querySelector("p"))["font-family"]
,它将返回整个数组georgia,garamond,serif
,而不是渲染的字体名称! - Vadim Ovchinnikov试试这个
它会获取在 style
中使用的字体名称
//using id
var b = document.getElementById("p").style.fontFamily;
console.log(b);
//or using jquery tag selecter
console.log($("p").css('fontFamily'));
<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;">