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

但是在最新版的谷歌里。已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下:

css部分 html布局

body,p{ margin:0; padding:0;}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}

<p><span id="span1">我是一个小于12PX的字体</span></p>

解释:

1.{webkit-transform:scale(0.8);  display:inline-block}  //0.8位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,

为什么定义 display:inline-block而不是 display:block?转为block就独占一行啦,所以转换为inline-block

2.{-o-transform:scale(1);}opera现在最新版也是webkit内核,新版本的opera,本来就是10px的字体了。

作者:smile.轉角

QQ:493177502

【css】怎么让Chrome支持小于12px 的文字的更多相关文章

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

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

  2. 让谷歌浏览器 chrome 支持小于12px的字体

    webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是 ...

  3. 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字

    在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设 ...

  4. CSS3 - chrome,傲游,360极速浏览器不支持小于12px的字号的解决办法

    google流量器chrome,傲游,360极速浏览器都是基于webkit内核浏览器,默认不支持小于font-size小于12px 的字号,即定义font-size小于12px时会发现字体大小依然是1 ...

  5. [Chrome](CSS) 解决Chrome font-size 小于 12px 无效

    Chrome中 font-size 小于 12px 会失效. 解决的办法一种是: -webkit-text-size-adjust:none; (但是Chrome27之后取消了支持) 利用CSS3的缩 ...

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

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

  7. 如何让谷歌浏览器支持小于12px的字体

    CSS3有个新的属性transform,而我们用到的就是transform:scale() 书写一段代码 <body> <p>我是一个小于12PX的字体</p> & ...

  8. 谷歌浏览器支持小于12px的字体

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Google不支持小于12px字体 终极办法

    每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员. 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸). 2.探索 2.1 CSS HAC ...

随机推荐

  1. Grafan+Prometheus 监控 MySQL

    架构图 环境 IP 环境 需装软件 192.168.0.237 mysql-5.7.20 node_exporter-0.15.2.linux-amd64.tar.gz mysqld_exporter ...

  2. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  3. C#基础(203)实例方法和重载方法总结,构造方法与实例方法总结,this关键字

    c#方法的重载:分为实例方法重载和静态方法重载俩种 1.实例方法重载的调用特点 首先写三个Add方法和三个Sub方法 public int Add(int a,int b) { return a + ...

  4. 2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript

    知乎原链 本文为中文代码示例之5分钟入门TypeScript的CTS版本. CTS作者是@htwx(github). 它实现了关键词和标准库的所有命名汉化. 本文并未使用附带的vscode相关插件(包 ...

  5. neutron是一个超级脚本的理解

    1.neutron 是由python写成,表面看有很多的字符串.逻辑处理,除去访问数据库.发送消息队列这些中间件的API调用外,其他部分大部分都在组装成一个shell命令. 并最终调用subproce ...

  6. Android加载图片的策略

    实现图片缓存也不难,需要有相应的cache策略.这里我采用 内存-文件-网络 三层cache机制,其中内存缓存包括强引用缓存和软引用缓存(SoftReference),其实网络不算cache,这里姑且 ...

  7. How do I install Daydream on my phone?

    Google's philosophy with their newest VR platform is simple. In order to offer the best possible exp ...

  8. Java相关问题整理

    1. OkHttpClient调用出现大量CLOSE_WAIT. 问题定位: 凡是系统中出现大量的CLOSE_WAIT,说明你的代码写的有问题,即:没有关闭连接. 在OkHttpClient中,默认时 ...

  9. [20180814]慎用查看表压缩率脚本.txt

    [20180814]慎用查看表压缩率脚本.txt --//最近看exadata方面书籍,书中提供1个脚本,查看某些表采用那些压缩模式压缩比能达到多少.--//通过调用DBMS_COMPRESSION. ...

  10. Linux环境下执行java -jar xxx.jar命令如何让springboot项目在后台运行

    段落引用> 由于springboot内置了tomcat容器,我们通常会把项目打成jar或者war后直接使用java -jar xxx.jar命令去运行程序,但是当前ssh窗口被锁定或者按下ctr ...