首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >获取浏览器中呈现文本的确切字体,可能有浏览器扩展名。

获取浏览器中呈现文本的确切字体,可能有浏览器扩展名。
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

复制
相关文章
JS 获取浏览器默认字体大小
将元素的字体大小设置为 medium 可以将其设为浏览器默认大小,通常为16 px。 以下是设置元素字体大小的 CSS 代码示例:
Cesirdy
2023/05/29
3.3K0
浏览器页面呈现过程
首先浏览器将输入的链接进行DNS解析,也就是将域名转换为IP地址的过程,得到了服务器具体的IP地址,才可以进行TCP链接以及数据的传输。 具体DNS解析的过程,浏览器首先检查自身的DNS缓存是否对于此域名有IP地址,chrome对于域名解析的缓存时间为60s,可以通过地址栏输入chrome://net-internals/#dns清除DNS缓存。若浏览器解析缓存未命中,则到操作系统中hosts文件检查域名与IP对应关系。若hosts文件未命中,则向本地域名服务器请求解析,本地域名服务器一般是运营商ISP提供的,一般是通过53端口发送UDP报文请求服务器解析DNS。若本地服务器解析未命中则会有两种解析方案:迭代解析与递归解析,一般来说,主机向本地域名服务器的查询一般都是采用递归查询,本地域名服务器向根域名服务器的查询通常是采用迭代查询,依次向根域名服务器、顶级域名服务器、主域名服务器等一级一级查询查询直到查询到IP地址。
WindRunnerMax
2020/08/27
6650
怎么解决浏览器字体太大的问题?
自己的浏览器字体太大了,怎么解决浏览器字体太大的问题?其实完全可以通过字体设置的方法来解决问题,下面就来看看具体操作方法吧!
时代疯
2021/07/21
2.2K0
IE的浏览器模式、文本模式
IE的浏览器模式,用于切换IE针对该网页的默认文本模式、对不同版本浏览器的条件注释解析、决定请求头里userAgent的值。它在浏览器发出请求之前就已经确定,网站没有办法修改这个值。它代表的是用户以何种浏览器访问网站。
菜的黑人牙膏
2019/01/21
1.3K0
浏览器如何查看session_获取浏览器的cookie
1,使用chrome访问目标网站 2,在chrome的地址栏中查看网站信息 https是这样的:
全栈程序员站长
2022/11/17
1.8K0
浏览器如何查看session_获取浏览器的cookie
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth
SAP梦心
2022/05/10
8.2K0
获取浏览器滚动距离
1 /** 2 * 获取浏览器滚动距离 3 */ 4 function getScrollOffset() { 5 if (window.pageXOffset) { 6 return { 7 x: window.pageXOffset, 8 y: window.pageYOffset 9 } 10 } else
ProsperLee
2018/10/24
1.1K0
js获取浏览器版本
获取浏览器版本 <script> function getBrowser() { var UserAgent = navigator.userAgent.toLowerCase(); var browserInfo = {}; var browserArray = { IE: window.ActiveXObject || "ActiveXObject" in window,
江一铭
2022/06/16
7.9K0
浏览器获取当前ip
如果有些浏览器不能获取出来  试试清缓存在执行上述代码 ctrl+shift+delete
双面人
2020/04/08
2.1K0
js获取浏览器语言
!function () { var lang = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器 lang = lang.substr(0, 2);//截取lang前2位字符 if(lang == 'zh'){ window.location.replace('./cn/home/index.html'); }else{ window.location.replace('./en/home/index.html') } }()
用户5760343
2019/08/02
7.6K0
浏览器工作原理 - 浏览器中的 JavaScript
函数 foo() 是一个完整的函数声明,没有涉及赋值操作;第二个函数,先声明了变量 bar,再把 function () {} 赋值给 bar。可以理解为:
Cellinlab
2023/05/17
5630
浏览器工作原理 - 浏览器中的 JavaScript
[javascript] js如何获取浏览器的语言
根据你的浏览器的设置,这段代码会返回不同的值,比如 zh-CN、en-US、zh-TW、zh 之类,如下图:
唯一Chat
2022/09/30
6.3K0
[javascript] js如何获取浏览器的语言
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)
网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高:document.body.scrollHeight  网页被卷去的高:document.body.scrollTop  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的高:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth  HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标  event.offsetX 相对容器的水平坐标  event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值  event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  IE,FireFox 差异如下:  IE6.0、FF1.06+:  clientWidth = width + padding  clientHeight = height + padding  offsetWidth = width + padding + border  offsetHeight = height + padding + border  IE5.0/5.5:  clientWidth = width - border  clientHeight = height - border  offsetWidth = width  offsetHeight = height  (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
山河木马
2019/03/05
16.2K0
js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document
似水的流年
2018/01/18
10.5K0
js 获取浏览器高度和宽度值(多浏览器)
js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中: document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
似水的流年
2018/01/12
7.7K0
js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中: document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 没有定义W3C的标准,则 IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
似水的流年
2019/12/10
5.7K0
获取浏览器视口大小
1 window.onload = function() { 2 alert("width: " + getPageScale().pageWidth + ", height: " + getPageScale().pageHeight); 3 }; 4 5 /** 6 * 获取浏览器视口大小 7 * @return {object} 宽,高 8 */ 9 function getPageScale(){ 10 var pageWidth = window.inne
就只是小茗
2018/12/12
1.2K0
javascript_获取浏览器属性
navigator.appName:浏览器名称; navigator.appVersion:浏览器版本; navigator.language:浏览器设置的语言; navigator.platform:操作系统类型; navigator.userAgent:浏览器设定的User-Agent字符串。 'use strict'; alert('appName = ' + navigator.appName + '\n' + 'appVersion = ' + navigator.appVersion
机器学习和大数据挖掘
2019/07/02
7310
PHP 中获取文件扩展名的正确方法
在 PHP 中,如何获取文件扩展名名呢,我们可能会用字符串操作函数进行处理,比如:
Denis
2023/04/15
1.3K0
Android 浏览器文本垂直居中问题
本文介绍了在Android浏览器上实现文本垂直居中的问题,并提供了两个解决方案:改变字体大小和用表格布局。通过测试,发现改变字体大小的方法并没有达到真正的垂直居中,而使用表格布局的方法则可以较好地实现文本垂直居中。
IMWeb前端团队
2017/12/29
1.7K0
Android 浏览器文本垂直居中问题

相似问题

浏览器中的字体呈现

30

浏览器中的字体呈现问题

12

如何查找浏览器使用的确切字体

11

Mac不在浏览器中呈现字体

10

Web浏览器中的文本/字体呈现。它是如何实现的?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文