font-size 设置字体不生效解决方案(小于12px)

简介: 字体不变小的原因?使用 font-size 设置小于 12px 的字体时,发现并不生效(字体不会再缩小了)。原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px,大部分浏览器都是如此,所以小于12px字体不会在变小,而是保持12px的大小

字体不变小的原因?

使用 font-size 设置小于 12px 的字体时,发现并不生效(字体不会再缩小了)。

原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px,大部分浏览器都是如此,所以小于12px字体不会在变小,而是保持12px的大小


解决方案

使用 transform: scale() 缩放属性来实现

.txt {
    -webkit-transform: scale(0.5)
}
/*scale:缩放,1为原始大小。scale(x)。正数放大,负数缩小。
属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。*/

兼容写法

有些浏览器允许设置小于 12px 的字体,那么你需要额外写一个类。

/* 优先采用 -webkit-transform 规则 */
.txt {
    -webkit-transform: scale(0.5)
}
/* 允许的浏览器采用以下规则 */
.fontSize {
    font-size:8px;
}
相关文章
|
算法 Unix 调度
【Qt 线程】深入探究QThread线程优先级:原理、应用与最佳实践
【Qt 线程】深入探究QThread线程优先级:原理、应用与最佳实践
1319 0
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
1438 1
|
Web App开发 JavaScript iOS开发
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
1112 1
|
JavaScript IDE 开发工具
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
这篇文章介绍了在Vue 3 + TypeScript + Vite开发环境中解决找不到`.vue`文件模块或其类型声明错误的两种方法:使用VSCode的TypeScript Vue Plugin (Volar)插件或手动在`env.d.ts`文件中声明`*.vue`模块类型。
2940 1
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
|
编解码 JavaScript
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
【vue2】vue2 适配pc端,解决浏览器缩放问题,解决电脑显示设置缩放、分辨率问题
2044 1
|
敏捷开发 存储 安全
潜力与限制:低代码开发平台优缺点全面分析
低代码开发平台加速企业数字化转型,优点包括快速开发、降低技术门槛、灵活定制和方便维护。然而,也存在复杂功能限制、数据孤岛、供应商依赖和安全合规问题。推荐的低代码平台有Zoho Creator(适合中小企业)、Mendix(创新型企业)、Microsoft Power Apps(大型企业)、OutSystems(高安全合规要求)以及AppSheet和Appian(入门级用户)。在选择时,需综合考虑业务需求、技术因素和风险。
1552 0
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
2509 1
|
移动开发 前端开发 开发者
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!