对于默认字体最小为12px解决方法

最新推荐文章于 2024-07-18 19:04:56 发布

PeakXin

最新推荐文章于 2024-07-18 19:04:56 发布

阅读量1.1w

点赞数 1

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/xinyflove/article/details/52874918

版权

HTML & CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

谷歌浏览器默认字体大小小于12px就不好用了，字体还是12px。
为了兼容所有的浏览器，使用缩放方式使字体变小。
比如以字体大小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>