Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >获取浏览器中呈现文本的确切字体,可能有浏览器扩展名。

获取浏览器中呈现文本的确切字体,可能有浏览器扩展名。
EN

Stack Overflow用户
提问于 2015-09-29 13:29:22
回答 1查看 974关注 0票数 6

我知道您可以通过font-family获得window.getComputedStyle()值,但这并不总是浏览器用来呈现的字体。例如,如果给定的文本包含字体系列不携带的(多语言)文本,则浏览器将部分使用系统字体呈现文本。

如果您看一下内置的web开发工具,无论是在Chrome还是Firefox中,它们都有一个小区域可显示( Chrome上的Rendered Fonts窗格或火狐上的Fonts选项卡)所使用的精确字体。对于火狐,我猜是使用了这段代码,它似乎在调用内部API。

我正在寻找任何符合DOM(或特定供应商)的方式,从JavaScript或其他地方获得准确的字体。如果这意味着编写浏览器扩展/加载项来提供API/inject /任何页面内代码要访问的内容,这是最坏的情况,但可以接受。

EN

回答 1

Stack Overflow用户

发布于 2015-09-29 13:59:04

--您可以使用黑客进行:主要思想是将内联元素的大小与某些给定的字体进行比较。一个应该使用完整的字体族值,另一个只能使用一个字体系列.这是概念的证明,它工作得很好。

代码语言:javascript
运行
AI代码解释
复制
// Look at the fiddle for full working code
function createFontTester(fontFamily) {
  var container = document.createElement('div');
  var tester = document.createElement('div');

  container.style.position = 'absolute';
  container.style.overflow = 'auto';
  container.style.visibility = 'hidden';

  tester.style.fontFamily = fontFamily;
  tester.style.display = 'inline';
  tester.style.visibility = 'hidden';

  // The size should be big enough to make a visual difference
  tester.style.fontSize = '100px'; 

  // Reset and prevent line breaks
  tester.style.fontWeight = 'normal';
  tester.style.fontStyle = 'normal';
  tester.style.letterSpacing = 'normal';
  tester.style.lineHeight = 'normal';
  tester.style.whiteSpace = 'nowrap';

  document.body.appendChild(container);
  container.appendChild(tester);

  return tester;
}

请注意,有些字体非常相似,以至于大多数字符占用相同的空间。以Helvetica和Arial为例:字符宽度大致相同,高度略有不同,所以我使用了一个大字体。

这种方法可能不是防弹的,但它适用于我能想到的每一个字体家庭。

更新:我在Github上创建了这个小图书馆,它处理更多的用例。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32854083

复制
相关文章
Vue的 侦听器 watch
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,
wust小吴
2019/12/27
6670
程序化的事件侦听器
也就是说,在其中一个页面中我们使用uni.on或者uni.once,在另一个页面中就可以使用uni.emit进行调用,前提是uni,on或者uni.
阿超
2022/08/17
1.4K0
程序化的事件侦听器
Vue2 侦听器 watch【初识】
1. 侦听器 watch ---- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器。 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 2. 基础用法 ---- 当 msg 属性的值发生改变时,就会触发侦听器的执行 <div id="app"> <input type="text" v-model="msg"> </div> <script> let vm = new Vue({ el: '#app', d
很酷的站长
2023/02/17
5580
Vue2 侦听器 watch【初识】
Vue计算属性和侦听器
模板内的表达式非常便利,但放入太多的逻辑会让模板过重且难以维护,所以,对于复杂的逻辑,可以使用计算属性 computed。
Leophen
2019/08/23
6920
jQuery事件
1. 常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) ready() DOM加载完成 示例代码: <script> $(function(){ var $li = $('.list li'); var $button = $('#button1') var $text = $("#text1");
落雨
2022/03/01
32K0
jquery事件
parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 描述: 匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input nam
wangxl
2018/03/07
2K0
JQuery事件
       focus()                 ------获得焦点事件
用户3159471
2018/09/13
2.3K0
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypr
静默虚空
2018/01/05
3K0
jQuery 事件
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
陈不成i
2021/07/22
2.4K0
九.Vue.js的侦听器
九.Vue.js的侦听器
Java架构师必看
2021/05/14
5590
jQuery 事件注册、事件处理
其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
梨涡浅笑
2020/10/27
4K0
jquery鼠标事件
click()   为点击事件绑定一个事件处理函数,或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData       一个对象,它包含的数据键值对应映射将被传递给事件处理程序。   handler(e
用户1197315
2018/01/19
4.9K0
Jquery 事件冒泡
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 (摘自网络) 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@ Page Language="C#" AutoEventW
Porschev
2018/01/16
3K0
jQuery事件(20171031)
1.交换内容 $("#btn").on("click",function(){ //方法一 var srcOne = $("img").eq(0).attr("src"); var srcTwo = $("img").eq(1).attr("src"); $("img").eq(0).attr("src",srcTwo); $("img").eq(1).attr("src",
天天_哥
2018/09/29
1.2K0
jQuery事件委托
在jQuery中,事件委托是一种优化事件处理的技术,它利用事件冒泡的机制,将事件处理程序绑定到一个父级元素上,从而减少事件处理函数的数量,并实现对动态添加的子元素的事件处理。
堕落飞鸟
2023/05/18
1.2K0
jquery事件绑定
.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件
用户1197315
2018/01/19
3.8K0
jquery基础事件
一.常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。。。。。
wfaceboss
2019/04/08
1.3K0
jQuery事件机制
JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
Qwe7
2022/04/16
1.9K0
jQuery事件代理
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
落雨
2022/03/01
30K0
jQuery事件处理
在jQuery中,事件处理是一项重要的功能,它使我们能够对元素的各种交互行为做出响应。jQuery提供了一系列方法来绑定、解绑和触发事件,以及操作事件对象。
堕落飞鸟
2023/05/18
9190

相似问题

jQuery会覆盖事件侦听器吗?

30

如何覆盖(?)jQuery事件?

10

Fosuserbundle覆盖事件侦听器

14

Vue无法附加事件侦听器

13

Jquery事件覆盖

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档