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;
}
相关文章
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
|
1月前
字体的大小(size属性)
【10月更文挑战第7天】字体的大小(size属性)。
38 1
|
4月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
113 1
|
4月前
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
66 0
|
5月前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
77 3
|
6月前
|
编解码 图形学 计算机视觉
viewpoint与rem、百分比、px 基础与面试题:viewpoint 与 rem、百分比高度、px
该文档介绍了网页设计中的尺寸单位,包括`viewpoint`、`rem`、百分比和像素`px`的概念和差异。`viewpoint`(如`vw/vh`)基于用户视口大小,常用于移动端适配;`rem`相对于根元素字体大小,适合做响应式设计;百分比相对于父元素尺寸,两者在响应式和基准上有所不同;像素`px`是图像和数字图形的基本单位,常用于精确布局。像素密度(PPI)影响图像清晰度,不同设备中像素表现形式不一。
|
6月前
|
开发者
用em来设置字体大小
用em来设置字体大小
43 1
|
6月前
|
前端开发
字体浓淡[font-weight]
字体浓淡[font-weight]。
30 2
|
编解码 前端开发
css中单位px、pt、em和rem的区别
css中单位px、pt、em和rem的区别
|
编解码
1rem、1em、1vh、1px各自代表的含义?
1rem、1em、1vh、1px各自代表的含义?