在最新版的谷歌里。已经不在支持这个属性啦

谷歌浏览器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谷歌浏览器不支持CSS设置小于12px的文字的更多相关文章

  1. Chrome谷歌浏览器下不支持css字体小于12px的解决办法

    先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...

  2. Chrome不支持css字体小于12px的解决办法

    我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...

  3. 解决CSS小于12px的文字在谷歌浏览器显示问题

    做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...

  4. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  5. 设置小于12px的字体

    .small-font{   font-size:12px;             -webkit-transform-origin-x: 0;            -webkit-transfo ...

  6. 【css】怎么让Chrome支持小于12px 的文字

    谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-web ...

  7. 使用css怎么让谷歌支持小于12px的文字比如10px

    1.小于12px的字体,如果内容固定,可以将内容切除做图片,没有兼容问题. 2.-webkit-text-size-adjust:none;老版本谷歌,27版本之后无用 3.-webkit-trans ...

  8. nginx,文件下载,预览,防止浏览器下载时直接打开,防止预览时直接下载文件,解决nginx谷歌浏览器不支持下载问题

    公司项目逐渐增多,对效率的要求越来越高,不同项目分部不同服务器,最初想用nginx 就是为了多个项目用一个url和服务器宕机解决方案 nginx也可作为附件服务器,毕竟nginx也对静态文件支持较好, ...

  9. 解决css设置背景透明，文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

随机推荐

  1. 变更到Android4.4的问题

    更新到Android 4.4,写了个小程序.发现运行不起来了.抛空指针异常.debug模式下,发现在onCreate方法中获取Button是null. Android 4.4把layout进行了重组, ...

  2. Qt写的截图软件包含源代码和可执行程序

    http://blog.yundiantech.com/?log=blog&id=14 Qt写的截图软件包含源代码和可执行程序 http://download.csdn.net/downloa ...

  3. 修改Delphi工具控件的默认字体

    修改Delphi工具控件的默认字体: 注册表: Delphi 6:    HKEY_CURRENT_USER\Software\Borland\Delphi\6.0Delphi 7:    HKEY_ ...

  4. Mysql 8个小时连接断开问题解析

    wait_timeout — 指的是mysql在关闭一个非交互的连接之前所要等待的秒数,其取值范围为1-2147483(Windows),1-31536000(linux),默认值28800. int ...

  5. 如何对一个不断更新的HashMap进行排序

    如何对一个不断更新的HashMap进行排序? 解答:等到HashMap更新稳定后,用ArrayList包装进行排序.或者自己写一个可以类似HashMap的有序Map,每次更新的时候都进行排序,构建自己 ...

  6. js之script属性async与defer

    概念 默认情况下js的脚本执行是同步和阻塞的,但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式,这些都是布尔类型了,没有值,只需要出现在 < ...

  7. 我要爱死这个markdown 了

    今天上班依旧看wpdang的文章,最后作者说,文章使用markdown写的,好奇心促使我搜了一把什么是markdown.然后看到了这篇文章,一瞬间就开始兴奋了.顿时觉得,这个东西太好用 了,简直又激起 ...

  8. 网络流CodeForces. Original 589F：Gourmet and Banquet

    A gourmet came into the banquet hall, where the cooks suggested n dishes for guests. The gourmet kno ...

  9. C#操作Active Directory(AD)详解

    1. LDAP简介 LDAP(轻量级目录访问协议,Lightweight Directory Access Protocol)是实现提供被称为目录服务的信息服务.目录服务是一种特殊的数据库系统,其专门 ...

  10. winphone 开发学习笔记（1）

    学习了winphone task 1.首先根据自己电脑下载sdk,,,win 7和win 8的Sdk安装包不一样, http://www.microsoft.com/en-hk/download/de ...