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;
}
相关文章
|
关系型数据库 MySQL 网络安全
|
JavaScript
解决VUE项目window.open()方法打包部署上线报错404
解决VUE项目window.open()方法打包部署上线报错404
737 0
|
前端开发 数据可视化 大数据
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
440 0
|
Web App开发 JavaScript iOS开发
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题
936 1
|
数据库 数据安全/隐私保护 Windows
Windows远程桌面出现CredSSP加密数据修正问题解决方案
【10月更文挑战第30天】本文介绍了两种解决Windows系统凭据分配问题的方法。方案一是通过组策略编辑器(gpedit.msc)启用“加密数据库修正”并将其保护级别设为“易受攻击”。方案二是通过注册表编辑器(regedit)在指定路径下创建或修改名为“AllowEncryptionOracle”的DWORD值,并将其数值设为2。
9784 3
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
9015 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
机器学习/深度学习 人工智能 算法
机器学习基础:使用Python和Scikit-learn入门
本文介绍了如何使用Python和Scikit-learn进行机器学习的基础知识和实践。首先概述了机器学习的基本概念,包括监督学习、无监督学习和强化学习。接着详细讲解了Python和Scikit-learn的安装、数据处理、模型选择与训练、模型评估及交叉验证等关键步骤。通过本文,初学者可以快速上手并掌握机器学习的基本技能。
250 2
|
前端开发 JavaScript Java
Springboot静态资源访问、上传、回显和下载
Springboot静态资源访问、上传、回显和下载
1341 0
Springboot静态资源访问、上传、回显和下载