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& ...
随机推荐
- Ubantu16.04一键部署Cacti监控服务器
Ubantu16.04一键部署Cacti监控服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 一.查看系统环境(关于该系统的安装 ...
- Opennms 问题整理
1.网页时间显示不正确,需要修改:bin/opennms: 添加:MANAGER_OPTIONS="$MANAGER_OPTIONS -Duser.timezone=Asia/Shangha ...
- 天啦噜!原来Chrome自带的开发者工具能这么用你知道么!
Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一 ...
- LinQ 简单使用
LinQ: 1.LinQ to Sql类(NET Language Integrated Query (LINQ) ) LINQ定义了大约40个查询操作符,如select.from.in.where以 ...
- Spring的Ioc和AOP扩展
多种方式实现依赖注入: 这里唯一需要说明的是如果要使用P命名空间实现属性注入,需要添加命名空间的声明: 如我的xml里红色字体: <?xml version="1.0" en ...
- gulp 安装 使用 和删除
1.安装 全局安装: npm intstall gulp -g (首先你得有node.js ,这个可以去node 官网下载个iso的镜像安装包,傻瓜式安装.自带npm) 安装在项目中: 首先 ...
- Unit01: JAVA开发环境
Top JAVA开发环境 1. JAVA开发环境 1.1. 认识Linux操作系统 1.1.1. Linux的由来及发展 Linux起源于1991年,1995年流行起来,大家可以看到旁边的这个人,它就 ...
- TCL笔试题 将A,B,B,C,D,E,第三个字符不可以是E的所有组合输出;
思路:利用排列思想,进行递归:#include "iostream" using namespace std; ]; void pick_one(char a[],int num[ ...
- Extjs swfUpload 多图片上传
一.属性介绍 类型 默认值 描述 upload_url String 处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 p ...
- 调优SQL思路
--调优SQL --sqlreview ->logshipping -> ag辅助副本 --查看正确的执行计划 打开实际的执行计划set statistics io on --查看错误的执 ...