Chrome不支持css字体小于12px的解决办法
我们先来看个效果图(chrome下):

从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px;
那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none;
可是我进行验证后发现并无效果。后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢?
可以利用css3的缩放属性:transform:scale()
.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
这样在元素上加上这个属性就OK了,但是只这样写可不会兼容IE、FF哦,所以再给一个兼容性写法:
.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
.smallsize-font{
Font-size: 6px;
}
<p class=“small-font samllsize-font”>温馨提示</p>
这时候有同学说你这不对啊,我加了这样式就没效果,别急哈,仔细看下你的元素是不是行内元素啊?
注意:transform:scale()
这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个display:inline-block;
属性就好啦。
PS:有小伙伴让用rem解决,我在这里解释一下哈,em、rem是一种相对单位,根据根元素的大小计算出来,目的是浏览器的字体大小变化时,页面布局及字体大小能跟着自适应。也就是说反应到浏览器要渲染是还是xx px,那Chrome浏览器本身是渲染不了12px以下的字体的,所以这个方法是不可行的,rem虽好,但不对这个症。
Chrome不支持css字体小于12px的解决办法的更多相关文章
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...
- 解决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 ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
- JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...
- CAD字体显示问号的解决办法
CAD字体显示问号的解决办法1.选中问号的文字,ctrl+1查看下文字样式,以standard为例.2.运行st命令,设置standard样式的字体名为windows自带的ttf字体,例如宋体或者仿宋 ...
- Response.Write()方法响应导致页面字体变大的解决办法
关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法 最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...
随机推荐
- HDU 5125 magic balls(线段树+DP)
magic balls Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- C#设计模式:模板方法模式(Template Method)
一,我们为什么需要模板设计模式? 在程序设计中,可能每个对象都有共同的地方,而此时如果每个对象定义一次,如下例子,每个对象都写Stay()方法,这样在每个类中都有很多相同的代码,此时,我们需要用到模板 ...
- SetDefaultDllDirectories问题
换台电脑编译报错! 在使用Visual Studio 2013编译程序的时候报以下错误 vc\atlmfc\include\atlcore.h(638): error C2039: “”: 不是“`g ...
- 强大的性能监控pidstat
前言 pidstat 可以监控单个任务.比如CPU.内存.IO.上下文切换.详细参考 man pidstat 安装 yum install sysstat 使用 1.监控所有活动进程 pidstat ...
- 十一、结构模式之享元(Flyweight)模式
什么是享元模式 享元模式是对象的结构模式,是运用共享技术来有效的支持大量细粒度的对象.享元对象能做到共享的关键是区分内蕴状态和外蕴状态.一个内蕴状态是存储在享元对象内部,并且是不会随环境改变而有所不同 ...
- Spring高频率面试题
1.Spring怎样定义类的作用域 通过bean 定义中的scope属性来定义. 2.Spring支持的几种bean的作用域 支持以下五种bean的作用域: singleton : bean在每个Sp ...
- SQL Server 2014 各版本介绍
SQL Server 2014 各版本介绍 目前,SQL Server 2014 分为主要版本和专业版. 在选择版本的时候可以根据您具体的需要进行抉择,如果你需要一个免费的数据库管理系统,那么就选择 ...
- spring在WEB中的应用。
1:创建IOC容器.在WEB应用程序启动的时候就创建.利用到监听器. ServletContextListener类的contextInitialized方法中 package com.struts2 ...
- 在树莓派3B上搭建LAMP
一.安装apache2 sudo apt-get install apache2 在电脑上输入树莓派的网址会有如下显示 二.安装Mysql sudo apt-get install mysql-ser ...
- AcWing 208. 开关问题 (高斯消元+状压)打卡
有N个相同的开关,每个开关都与某些开关有着联系,每当你打开或者关闭某个开关的时候,其他的与此开关相关联的开关也会相应地发生变化,即这些相联系的开关的状态如果原来为开就变为关,如果为关就变为开. 你的目 ...