谷歌浏览器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. Fetch使用

    Fetch API 提供了一个获取资源的接口(包括跨域请求).任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集. 概念和用法 Fetch 提供了对 ...

  2. 微信小程序 table 简单测试

    <view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...

  3. 洛谷P4104 [HEOI2014]平衡(dp 组合数学)

    题意 题目链接 Sol 可以把题目转化为从\([1, 2n + 1]\)中选\(k\)个数,使其和为\((n+1)k\). 再转化一下:把\((n+1)k\)划分为\(k\)个数,满足每个数在范围在\ ...

  4. wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑

    一.添加原生标题栏 添加原生标题栏可以参照 <wap2app(六)-- wap2app的原生标题头无法隐藏>,具体如下: 1.打开 sitemap.json文件 --> page配置 ...

  5. (网页)input框怎么覆盖掉数字英文的

    例子1: <input type="text" value="0" onkeyup="cleartwoNum(this)"> / ...

  6. 微软的wp版remotedesktop第三方库居然用了openssl和苹果的东西

    微软的wp版remotedesktop居然用了openssl和苹果的东西,这真是想不通.不说openssl的漏洞问题,windows nt已经带了很全面的加解密api.

  7. Scala并发编程【进阶】

    package com.dingxin.entrance import java.text.SimpleDateFormat import java.util.Date import scala.ac ...

  8. Cas 服务器 JDBC身份校验

    之前的Cas服务器一直使用静态配置的账号密码进行身份认证,现在要让Cas服务器通过MySQL数据库中的用户信息进行身份认证. 一.添加数据库访问依赖 <!-- https://mvnreposi ...

  9. java调用天气预报接口案例

    免费天气接口:http://mobile.weather.com.cn/data/sk/城市ID.html 例如: http://mobile.weather.com.cn/data/sk/10124 ...

  10. 一套简单的git版本控制代码

    对于博客来说,我还是直接实践比较好,理论过多,不方便以后的查看 废话不多,直接开干 功能需求: .公司需要将jenkins打包出来的压缩包通过git上传到git服务器 .而且通过版本控制上传的文件,即 ...