Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JS 获取浏览器默认字体大小

JS 获取浏览器默认字体大小

作者头像
Cesirdy
发布于 2023-05-29 06:00:22
发布于 2023-05-29 06:00:22
3.4K00
代码可运行
举报
文章被收录于专栏:CSD的一些笔记CSD的一些笔记
运行总次数:0
代码可运行

说是 JS,其实也还是要配合 CSS 使用。

要获取浏览器默认字体大小,我们可以使用 CSS 的 font-size 属性。

将元素的字体大小设置为 medium 可以将其设为浏览器默认大小,通常为16 px。 以下是设置元素字体大小的 CSS 代码示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.element {
  font-size: medium;
}

一旦将元素字体大小设置为浏览器默认大小,就可以通过 JavaScript 来获取其实际值。 下面的代码演示了如何使用 JavaScript 获取浏览器默认字体大小:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const measureElement = document.querySelector('.element');
let fontSize = parseInt(getComputedStyle(measureElement).fontSize);

首先使用 document.querySelector() 方法选择具有类名为 .element 的元素。 然后,使用 getComputedStyle() 方法获取该元素的计算样式,即应用于该元素的实际样式。 最后,使用 parseInt() 方法将获取到的字体大小值转换为整数。

需要注意的是,如果浏览器默认字体大小被修改,例如在 Chromium 浏览器中将其更改为"特大",则返回值将相应地更改。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅谈-web屏幕适配的解决方案
就目前看来,web的屏幕适配是贯穿整个前端行业的,如常见的PC端,移动端,响应式,小程序等。
万少
2025/02/11
1080
浅谈-web屏幕适配的解决方案
CSS 基础 之 基础选择器+字体文本相关样式
css写在style标签中,style标签一般写在head标签里面,title标签下面。
叫我阿杰好了
2022/11/07
2.1K0
CSS 基础 之 基础选择器+字体文本相关样式
px rem 转换的几种方法(分辨率字体调整)
目前(2016-06-19)px转rem 的工具已经不少了。下面介绍几个转换的方案。
White feathe
2021/12/08
2.5K0
px  rem 转换的几种方法(分辨率字体调整)
浏览器渲染流程
页面的设计与实现之后,前端工程师就需要关注性能优化了。其中浏览器渲染机制是前端性能优化的关键,弄浏览器在背后做了什么,才能在明白如何优化。
河马嘴不大
2022/12/24
5000
浏览器渲染流程
浏览器渲染原理
腾讯IVWEB团队
2017/05/05
2.7K0
js 动画:碰撞检测
  碰撞检测是指两个物体碰撞,或者图片发生重叠之后的检测,这种检测往往在优秀中用的最多,比如飞机大战,子弹与敌机的碰撞等等,这种碰撞一旦被检测到,往往会执行一些事件,比如游戏中的敌人死亡的动态效果,这就是碰撞检测。 下面是自己实现的两种碰撞检测:
不愿意做鱼的小鲸鱼
2022/08/24
5.7K0
js 动画:碰撞检测
问题小记
冒泡和捕获: 当addEventListener的第三个参数为true的时候,代表是在捕获阶段绑定;当第三个参数为false或者为空的时候,代表在冒泡阶段绑定
Tiffany_c4df
2019/09/04
7170
给网站加上全局字体增大减小功能(自适应) JavaScript
使用 JavaScript 给网站加上全局字体增大减小的功能,自适应 字体有时候小或者大都会影响用户体验,所以添加一个自助调节字体大小的功能是非常方便好用的
xlj
2021/07/14
1.3K0
深入理解Shadow DOM v1[每日前端夜话0x63]
shadow DOM不是超级英雄电影中的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(或简称DOM)中缺少的树封装方法。
疯狂的技术宅
2019/05/15
1.2K0
C1 能力认证——Web进阶
C1 能力认证——Web进阶 DOM节点操作-上 名称 描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 除了函数方法,我们还可以使用属性来获取节点信息,下表介绍了一些获取元素节点信息常用的属性。 名称 描述 innerHTML 返回元素内包含的所有HTML
HammerZe
2022/03/24
3.3K0
C1 能力认证——Web进阶
如何设置字体大小?我们可以使用哪些单位来修改字体大小呢?
所以,这期文章(文案)我们讲解以下问题,问题一:如何设置字体大小?问题二:我们在修改字体时,可以使用哪些单位?
编程少年 刘小圳
2024/06/02
1900
为什么你永远不应该在CSS中使用px来设置字体大小
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
前端小智@大迁世界
2023/04/06
1.9K0
为什么你永远不应该在CSS中使用px来设置字体大小
pc 和 ipad 端网站适配
方法一:设置fontsize 按照iphone 5的适配 1em=10px 适配320
公众号---人生代码
2020/11/11
3K0
浏览器特性
window.onload 事件表示页面加载完成后才加载 JavaScript 代码。这里的 “页面加载完成” 指的是在文档装载完成后会触发 load 事件,此时,在文档中的所有对象都在 DOM 中,所有图片,脚本,链接以及子框都完成了装载。而 img.onload 仅仅指的是图片装载完成。
多云转晴
2020/04/08
1.3K0
浏览器特性
浏览器渲染之回流重绘
回流和重绘是前端开发的高频词汇之一,你可以在各种面经,性能优化相关文章可以看到,但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。
政采云前端团队
2021/09/30
1.7K0
浏览器渲染之回流重绘
浅谈web自适应
随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难,适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图,结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验,希望有益于诸君。
疯狂的技术宅
2019/03/28
1.4K0
浅谈web自适应
h5新功能data-*,好好利用,还能做数据双向绑定
标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而获取其CSS属性的方法还是有的。 window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素,然后利用getPropertyValue方法获取对应的属性的值。 根据MDN的文档, window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数,一
前朝楚水
2018/04/02
1.8K0
移动端H5开发之页面适配篇
最近开发并上线了一款H5项目,在这里想和大家分享一下关于项目中使用到的移动端适配技巧,如果对你们有所帮助的话,就多多点赞收藏😃各位看官老爷别着急,在讲页面适配之前,我们先来捋一捋viewport(视口)的概念~在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口1.1 布局视口图片在移动端,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,用户可以手动对网
三点水的洋
2022/06/10
7.7K1
移动端H5开发之页面适配篇
解决因为手机设置字体大小导致h5页面在webview中变形的BUG
FungLeo
2018/01/08
6.8K0
CSS Houdini:用浏览器引擎实现高级CSS效果
Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织或者神奇魔法,它是一系列与CSS引擎相关的浏览器API的总称。
2020labs小助手
2022/07/11
8390
相关推荐
浅谈-web屏幕适配的解决方案
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验