解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
2016-03-02 10:09
671 查看
在最新版的谷歌里。已经不在支持这个属性啦
谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即
可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下:
-webkit-text-size-adjust:none;
如何让谷歌浏览器支持小于12px的字体
经常与网页打交道的攻城师,应该都知道。谷歌不支持小于12px的字体。
网页解决方案很多。
比如。修改浏览器配置。修改浏览器语言。
但作为一个WEB,我们无法修改用户的浏览器。这时候就出现了
1
webkit的私有属性:
2
html{-webkit-text-size-adjust:none;}
但是,在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。
已经和我们说再见啦~
CSS3有个新的属性transform
而我们用到的就是transform:scale()
书写一段代码
1
<body>
2
<p>我是一个小于12PX的字体</p>
3
</body>
定义样式
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px
所以我们就用到了
1
-webkit-transform:scale(0.8); //0.8位缩放倍数,具体自己根据实际需求修改
修改后样式为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,如果,这个属性会把真个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!
所以我们修改结构为
1
<p><span>我是一个小于12PX的字体</span></p>
定义样式为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);}
但是你会惊讶发现,不可以。实际上,是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高
的元素,而span是行内元素,不可以
我们修改为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
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
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
让opera的不缩放。
放心opera还是支持他的私有前缀的。
现在我们代码就是这样啦!
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>无标题文档</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span>我是一个小于12PX的字体</span></p>
15
</body>
16
</html>
为了方便,我们最好定义为一个类,方便我们每次调用
修改为
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>无标题文档</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span class="shrink">我是一个小于12PX的字体</span></p>
15
</body>
16
</html>
如果你有好的解决方案。欢迎给我留言!
谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即
可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下:
-webkit-text-size-adjust:none;
如何让谷歌浏览器支持小于12px的字体
经常与网页打交道的攻城师,应该都知道。谷歌不支持小于12px的字体。
网页解决方案很多。
比如。修改浏览器配置。修改浏览器语言。
但作为一个WEB,我们无法修改用户的浏览器。这时候就出现了
1
webkit的私有属性:
2
html{-webkit-text-size-adjust:none;}
但是,在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。
已经和我们说再见啦~
CSS3有个新的属性transform
而我们用到的就是transform:scale()
书写一段代码
1
<body>
2
<p>我是一个小于12PX的字体</p>
3
</body>
定义样式
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px
所以我们就用到了
1
-webkit-transform:scale(0.8); //0.8位缩放倍数,具体自己根据实际需求修改
修改后样式为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,如果,这个属性会把真个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!
所以我们修改结构为
1
<p><span>我是一个小于12PX的字体</span></p>
定义样式为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);}
但是你会惊讶发现,不可以。实际上,是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高
的元素,而span是行内元素,不可以
我们修改为
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
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
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
让opera的不缩放。
放心opera还是支持他的私有前缀的。
现在我们代码就是这样啦!
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>无标题文档</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span>我是一个小于12PX的字体</span></p>
15
</body>
16
</html>
为了方便,我们最好定义为一个类,方便我们每次调用
修改为
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>无标题文档</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span class="shrink">我是一个小于12PX的字体</span></p>
15
</body>
16
</html>
如果你有好的解决方案。欢迎给我留言!
相关文章推荐
- CSS外边距margin上下元素重叠
- DIV+CSS 中的 overflow:hidden清楚浮动作用
- CSS Day04 css核心基础
- rgba实现背景颜色透明
- js+css实现回到顶部按钮(back to top)
- 利用@media screen实现网页布局的自适应
- CSS学习(四)-css边框样式(下)
- js+css实现回到顶部按钮(back to top)
- 深入理解CSS背景
- CSS3学习
- DOM-设置样式
- DOM-元素的属性,样式
- 作品第四课----css函数一设置/读取对象的属性
- HTML-CSS文件链接HTML的三种方式
- CSS---@import
- CSS---!important
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3媒介查询
- back to top 回到顶部按钮 css+js
- CSS3:有雪花的导航栏实例