先来看下 ie、火狐、谷歌浏览器下各个字体显示情况

ie下:

火狐下:

谷歌下:

从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px;

那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none;

可是我进行验证后发现,在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢?

我们可以使用到 css3里的一个属性:transform:scale()

属性介绍可以戳这里:http://www.w3chtml.com/css3/properties/2d-transform/transform.html

这个属性前给-webkit-谷歌前缀,那么就可以控制字体的大小,代码如下:

1

2

3

4

5

6

7

<style>

p{font-size:10px;-webkit-transform:scale(0.8);}

/*这里的数字0.8,是缩放比例,可以根据情况变化。*/

</style>

<p>中梦测试10px</p>

如下图:

但是要注意一点,如果这个<p>元素有背景的话,给这个属性会使背景也随着变化,所以,我们可以给<p>标签里再套个<span>

 <style>
p span{font-size:10px;-webkit-transform:scale(0.8);}
</style> <p><span>中梦测试10px</span></p>

你会发现没有效果,如图:

这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;

我们可以给span元素定义一个display:block,这样就可以了。

 <style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style> <p><span>中梦测试10px</span></p>

这样在谷歌浏览器下走一遍,字体就能更改了。

Chrome谷歌浏览器下不支持css字体小于12px的解决办法的更多相关文章

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

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

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

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

  3. Chrome下font-size小于12px的解决办法

    自从Chorme取消了-webkit-text-size-adjust,这个问题又变得令人烦恼起来. 好在我们可以利用-webkit-transform这个私有属性. .box{ -webkit-tr ...

  4. chrome 浏览器最小字体为12px 的解决办法

    http://banri.me/web/webkit-text-size-adjust.html 对div进行缩放 12*0,75 = 9 px -webkit-transform: scale(0. ...

  5. CSS常见兼容问题以及解决办法

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...

  6. CAD字体显示问号的解决办法

    CAD字体显示问号的解决办法1.选中问号的文字,ctrl+1查看下文字样式,以standard为例.2.运行st命令,设置standard样式的字体名为windows自带的ttf字体,例如宋体或者仿宋 ...

  7. 关于python下安装PIL库遇到的问题及解决办法

    关于python下安装PIL库遇到的问题及解决办法 关于python下安装PIL库遇到的问题及解决办法 :在下面这个网址下载pipllow(a replacement for PIL) www.lfd ...

  8. JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  9. html标签被div嵌套页面字体变大的解决办法

    html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...

随机推荐

  1. Timusoj 1982. Electrification Plan

    http://acm.timus.ru/problem.aspx?space=1&num=1982 1982. Electrification Plan Time limit: 0.5 sec ...

  2. Centos下设置VNC为3389端口

    1.安装vnc yum install vnc vnc-server yum install vnc vnc-server 2.修改vnc端口,修改/usr/bin/vncserver ,把5900变 ...

  3. Linux下make与makefile

    make 用来解析 makefile 文件 make 的选项:-d   显示调试信息-f 文件  默认是从 makefile 或 Makefile 中读取依赖信息,用该选项可更改文件-h   显示所有 ...

  4. android下面使用SurfaceView+ mediaPlayer播放视频

    final SurfaceView surfaceView = new SurfaceView(StartupActivity.this); StartupActivity.this.mediaPla ...

  5. Microsoft SQL Server 数据库服务器管理维护角色

    固定服务器角色: 按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允 ...

  6. 2015最新德淘W家(Windeln.de)新人优惠码wcode0520,赠1000积分,可抵10欧元

    德淘W家(Windeln.de)网址:www.windeln.de 德淘W家(Windeln.de)的新人优惠码wcode0520 第一次购物结账时输入wcode0520,提交订单,1000积分划入你 ...

  7. Dom编程

    Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...

  8. 大理石在哪里UVa 10474

    我自己写的代码 #include<iostream>#include<algorithm>using namespace std;int main(){    int N,a[ ...

  9. Hibernate框架简述 内部资料 请勿转载 谢谢合作

    Hibernate的核心组件在基于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.properties或hibernate.c ...

  10. nginx :413 Request Entity Too Large

    nginx出现这个问题的原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了, 如上传大文件过大.POST数据比较多. 处理方法 在nginx.conf增加 clien ...