chrome浏览器字体小于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>
   
   
   
   
  • 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

效果为:
谷歌浏览器:
chrome浏览器字体小于12px的解决方式_第1张图片
火狐浏览器:
chrome浏览器字体小于12px的解决方式_第2张图片
IE浏览器:
chrome浏览器字体小于12px的解决方式_第3张图片




这样就可以啦~~~

你可能感兴趣的:(前端)