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

谷歌浏览器默认字体大小小于12px就不好用了,字体还是12px。
为了兼容所有的浏览器,使用缩放方式使字体变小。
比如以字体大小12px为基数,缩放90%就是10.8px
代码为:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
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">字体大小 12pxp>
<p class="small-font smallsize-font">字体大小 10.8pxp>
body>
html>

效果为:
谷歌浏览器:
这里写图片描述
火狐浏览器:
这里写图片描述
IE浏览器:
这里写图片描述
搞定!

你可能感兴趣的:(HTML,&,CSS)