经常与网页打交道的攻城师,应该都知道。谷歌不支持小于12px的字体。
网页解决方案很多。
比如。修改浏览器配置。修改浏览器语言。
但作为一个WEB,我们无法修改用户的浏览器。这时候就出现了
1
2
|
webkit的私有属性:
html{-webkit-text-size-adjust:
none
;}
|
但是,在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。
已经和我们说再见啦~
CSS3有个新的属性transform
而我们用到的就是transform:scale()
书写一段代码
1
2
3
|
<
body
>
<
p
>我是一个小于12PX的字体</
p
>
</
body
>
|
定义样式
1
2
|
body,p{
margin
:
0
;
padding
:
0
}
p{
font-size
:
10px
;}
|
放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px
所以我们就用到了
1
|
-webkit-transform:scale(
0.8
); //
0.8
位缩放倍数,具体自己根据实际需求修改
|
修改后样式为
1
2
|
body,p{
margin
:
0
;
padding
:
0
}
p{
font-size
:
10px
;-webkit-transform:scale(
0.8
);}
|
但是,如果,这个属性会把真个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!
所以我们修改结构为
1
|
<
p
><
span
>我是一个小于12PX的字体</
span
></
p
>
|
定义样式为
1
2
3
|
body,p{
margin
:
0
;
padding
:
0
}
p{
font-size
:
10px
;}
span{-webkit-transform:scale(
0.8
);}
|
但是你会惊讶发现,不可以。实际上,是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高的元素,而span是行内元素,不可以
我们修改为
1
2
3
|
body,p{
margin
:
0
;
padding
:
0
}
p{
font-size
:
10px
;}
span{-webkit-transform:scale(
0.8
);
display
:inline-
block
}
|
为什么定义 display:inline-block而不是 display:block?
转为block就独占一行啦。如果我后面紧追元素怎么办。所以转换为inline-block;
放在谷歌浏览器里,运行一下会发现支持字体变小啦~~放心啦。。。
但是你会发现。会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位置还占有12px字体的大小。
所以,要对应修改margin了。定义为负的。。
其实还没结束~~~
你以为这样就结束了吗?
NO,我们还需要去兼容opera!!!
为什么?opera现在最新版也是webkit内核啦~~~苦逼的工程师呀~
但是新版本的opera呢?
本来就是10px的字体了。然后在缩放,不敢想象了!
所以我们要修改样式为
1
2
3
|
body,p{
margin
:
0
;
padding
:
0
}
p{
font-size
:
10px
;}
span{-webkit-transform:scale(
0.8
);-o-transform:scale(
1
);
display
:inline-
block
}
|
让opera的不缩放。
放心opera还是支持他的私有前缀的。
现在我们代码就是这样啦!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>无标题文档</
title
>
<
style
>
body,p{ margin:0; padding:0}
p{font-size:8px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
</
style
>
</
head
>
<
body
>
<
p
><
span
>我是一个小于12PX的字体</
span
></
p
>
</
body
>
</
html
>
|
为了方便,我们最好定义为一个类,方便我们每次调用
修改为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>无标题文档</
title
>
<
style
>
body,p{ margin:0; padding:0}
p{font-size:8px;}
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
</
style
>
</
head
>
<
body
>
<
p
><
span
class
=
"shrink"
>我是一个小于12PX的字体</
span
></
p
>
</
body
>
</
html
>
|
.webkit {
font-size: 9px;
-webkit-transform: scale(0.75);}
12×0.75=9,对于其它浏览器来说,9px默认识别,仅需要对于webkit浏览器进行缩放。
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1);
转载于:https://blog.51cto.com/51ctogreat/1363881