Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 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 |
|
如下图:
但是要注意一点,如果这个<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的解决办法的更多相关文章
- Chrome不支持css字体小于12px的解决办法
我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...
- 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设 ...
- Chrome下font-size小于12px的解决办法
自从Chorme取消了-webkit-text-size-adjust,这个问题又变得令人烦恼起来. 好在我们可以利用-webkit-transform这个私有属性. .box{ -webkit-tr ...
- chrome 浏览器最小字体为12px 的解决办法
http://banri.me/web/webkit-text-size-adjust.html 对div进行缩放 12*0,75 = 9 px -webkit-transform: scale(0. ...
- CSS常见兼容问题以及解决办法
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...
- CAD字体显示问号的解决办法
CAD字体显示问号的解决办法1.选中问号的文字,ctrl+1查看下文字样式,以standard为例.2.运行st命令,设置standard样式的字体名为windows自带的ttf字体,例如宋体或者仿宋 ...
- 关于python下安装PIL库遇到的问题及解决办法
关于python下安装PIL库遇到的问题及解决办法 关于python下安装PIL库遇到的问题及解决办法 :在下面这个网址下载pipllow(a replacement for PIL) www.lfd ...
- JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
随机推荐
- Timusoj 1982. Electrification Plan
http://acm.timus.ru/problem.aspx?space=1&num=1982 1982. Electrification Plan Time limit: 0.5 sec ...
- Centos下设置VNC为3389端口
1.安装vnc yum install vnc vnc-server yum install vnc vnc-server 2.修改vnc端口,修改/usr/bin/vncserver ,把5900变 ...
- Linux下make与makefile
make 用来解析 makefile 文件 make 的选项:-d 显示调试信息-f 文件 默认是从 makefile 或 Makefile 中读取依赖信息,用该选项可更改文件-h 显示所有 ...
- android下面使用SurfaceView+ mediaPlayer播放视频
final SurfaceView surfaceView = new SurfaceView(StartupActivity.this); StartupActivity.this.mediaPla ...
- Microsoft SQL Server 数据库服务器管理维护角色
固定服务器角色: 按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允 ...
- 2015最新德淘W家(Windeln.de)新人优惠码wcode0520,赠1000积分,可抵10欧元
德淘W家(Windeln.de)网址:www.windeln.de 德淘W家(Windeln.de)的新人优惠码wcode0520 第一次购物结账时输入wcode0520,提交订单,1000积分划入你 ...
- Dom编程
Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...
- 大理石在哪里UVa 10474
我自己写的代码 #include<iostream>#include<algorithm>using namespace std;int main(){ int N,a[ ...
- Hibernate框架简述 内部资料 请勿转载 谢谢合作
Hibernate的核心组件在基于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.properties或hibernate.c ...
- nginx :413 Request Entity Too Large
nginx出现这个问题的原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了, 如上传大文件过大.POST数据比较多. 处理方法 在nginx.conf增加 clien ...