使浏览器支持12px字体的方法

chrome浏览器默认最小字号为12px,

原因是因为chrome团队认为汉字小于12就会增加识别难度

一.解决方法

常见的解决方法有:

1.zoom

2.-webkit-transform:scale()

3.-wekit-text-size-adjust:none

Zoom

Zoom字面的意思是变焦,可以改变页面上的元素尺寸,属于真实尺寸其支持的值类型有

//zoom:50&,//表示缩小到原来的一半
//zoom:0.5 //表示缩小到原来的一半<style>.span1{font-size:12px;display:inline-block;zoom:0.8;}
.span2{display:inline-block;font-size:12px}
</style>
<body><span class="span1">测试</span><span  class="span2">测试</span>
</body>

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀,用transform:scale()这个属性进行放缩

注意的是,使用scale属性只对可以定义宽高的元素生效,所以,下面代码中将span元素转为行内块元素

实现代码如下:

<style type="text/css">.span{font-size:12px;display:inline-block;-webkit-transform:scale(0.8);}.span{display:inline-block;font-size:12px;}
</style>
<body><span class="span1">测试</span><span class="span2">测试2</span>
</body>

-webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备浏览器来自动的调整显示大小

属性值:

percentage:字体显示的大小;

auto:默认,字体会根据设备/浏览器来自动调整;

none;字体大小自动调整

html{-webkit-text-size-adjust:none;
}

这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了

所以，我们不建议全局应用该属性，而是单独对某一属性使用

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

使浏览器支持12px字体的方法相关推荐

如何在搜狗浏览器更换页面字体？搜狗浏览器更换页面字体的方法
搜狗浏览器是一款提供给用户更好体验的浏览器,该软件拥有众多好用的功能,给用户带来更便利的服务,但是有时候又觉得太单调了,想换个字体,体验下不一样的感受,又不知道在哪里更换,接下来,就让小编教你搜狗浏览 ...
让IE浏览器支持HTML5标准的方法
让IE浏览器支持HTML5标准的方法自HTML5标准的提出就得到非常多的关注,而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题,上周微软在技术大会上就表示目前微软正在 ...
浏览器支持什么字体？
浏览器支持什么字体取决于用户系统里安装了什么字体. 如CSS中这么写:font-family:"微软雅黑","黑体","宋体";浏览器会按照 ...
谷歌浏览器和火狐浏览器的12px字体显示大小不一样
这里写自定义目录标题功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中.居左.居右 Smar ...
通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择。
http://www.zhangxinxu.com/wordpress/2018/02/js-detect-suppot-font-family/ 本文根据张鑫旭文章. 字体函数: var dataF ...
Web中常用字体介绍(ios和android浏览器支持的字体)，Mark以后留用
1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...
让IE浏览器支持HTML5标准的方法（转）
====================================================== 注:本文源代码点此下载 ================================= ...
想有自己的博客吗？浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下.写作也是一种很重要的能力,需要长久坚持和锻炼. 写作能力重不重要?语文重不重要?读书重不重要? 我觉得语文和写作能力是所有能力的基础,是重中之重.因为你 ...
中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...

使浏览器支持12px字体的方法

使浏览器支持12px字体的方法相关推荐

最新文章

热门文章