chrome浏览器字体小于12px的解决方式

最新推荐文章于 2024-06-12 12:57:35 发布

虔诚带着决然

最新推荐文章于 2024-06-12 12:57:35 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签：谷歌浏览器字体小于12px

本文链接：https://blog.csdn.net/weixin_42218847/article/details/82021240

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

为了兼容所有的浏览器，使用缩放方式使字体变小
比如以字体大小12px为基数，缩放90%就是10.8px
代码为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.normal-font-12 {
    font-size: 12px;
}

.small-font{
    font-size:12px;

    transform: scale(0.90);
    transform-origin:0 0;

    -ms-transform: scale(0.90);         /* IE 9 */
    -ms-transform-origin:0 0;       /* IE 9 */

    -webkit-transform: scale(0.90); /* Safari 和 Chrome */
    -webkit-transform-origin:0 0;   /* Safari 和 Chrome */

    -moz-transform: scale(0.90);        /* Firefox */
    -moz-transform-origin:0 0;      /* Firefox */

    -o-transform: scale(0.90);      /* Opera */
    -o-transform-origin:0 0;        /* Opera */
}

</style>
<body>
<p class="normal-font-12">字体大小 12px</p>
<p class="small-font smallsize-font">字体大小 10.8px</p>
</body>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果为：
谷歌浏览器：
这里写图片描述
火狐浏览器：

IE浏览器：

这样就可以啦~~~

虔诚带着决然

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
chrome浏览器字体小于12px的解决方式

为了兼容所有的浏览器，使用缩放方式使字体变小比如以字体大小12px为基数，缩放90%就是10.8px 代码为：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;demo&lt;/title&gt;&lt;/
复制链接

扫一扫