假设我的页面中有以下CSS规则:
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
Run Code Online (Sandbox Code Playgroud)
如何检测用户浏览器中使用了哪一种已定义的字体?
编辑让人想知道为什么我要这样做:我检测的字体包含其他字体不可用的字形,当用户没有字体时我想显示一个链接,要求用户下载该字体,以便他们可以使用我的Web应用程序与正确的字体.
目前我正在显示所有用户的下载字体链接,我想只显示没有安装正确字体的人.
想象一下,我有以下CSS
font-family: 'Non-existant Sans', Arial, sans-serif;
Run Code Online (Sandbox Code Playgroud)
假设系统上未安装"不存在的Sans",浏览器将使用Arial.使用Chrome,有没有办法找出正在呈现的字体?
编辑:戴夫(在问题的评论中)指出了一个类似的问题.我在这里专门询问Chrome.然而,另一个问题中的许多答案都表明扩展是可以的; 是否存在使用Dev Tools单独确定此信息的本地方法?
编辑2013年9月: Chrome团队刚刚宣布,Chrome Canary的最新版本中提供了字体系列检查(Twitter链接包含更多信息的图像).这应该会在未来几周内通过dev> beta>稳定下来 - 好消息!
如果未定义CSS font-face和font-size属性,如何获取元素的实际字体和字体大小?
例如,JavaScript代码段
object.style.fontFamily
Run Code Online (Sandbox Code Playgroud)
不会返回任何价值.这很明显,假设CSS没有将样式应用到object任何地方.但是,当然,某种字体用于呈现文本,可能是系统字体或webbrowser默认字体.
那么,例如,JavaScript可以获得渲染的字体吗?
在 Web 开发中,首选字体列表放在 CSS 的 font-family 中,如下示例。
font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
Run Code Online (Sandbox Code Playgroud)
我想知道浏览器选择哪种字体来显示内容。我知道我可以font-family在浏览器开发工具中手动一一修改字体并观察显示内容的变化来识别浏览器使用的字体。但它太笨拙了,需要非常敏锐的眼睛T_T。
任何人都可以知道更好的方法吗?非常感谢!
我有一个带有内联样式的段落,如下所示:
<p style="font-family:georgia,garamond,serif;">
Run Code Online (Sandbox Code Playgroud)
我的问题是,有没有办法找出我的页面正在使用哪种字体以及选择过程是什么?