让chrome支持小于12px-的文字方式(多种方法)

这篇具有很好参考价值的文章主要介绍了让chrome支持小于12px-的文字方式(多种方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

让chrome支持小于12px-的文字方式(多种方法),chrome,前端

一、背景

Chrome 中文版浏览器会默认设定页面的最小字号是12px,英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

  • 中文版浏览器

与网页语言无关,取决于用户在Chrome的设置里(chrome://settings/languages)把哪种语言设置为默认显示语言

  • 系统级最小字号

浏览器默认设定页面的最小字号,用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中,不能奢求用户更改浏览器设置

对于文本需要以更小的字号来显示,就需要用到一些小技巧

二、解决方案

常见的解决方案有:

  • zoom
  • -webkit-transform:scale()
  • -webkit-text-size-adjust:none

Zoom

zoom 的字面意思是“变焦”,可以改变页面上元素的尺寸,属于真实尺寸

其支持的值类型有:

  • zoom:50%,表示缩小到原来的一半
  • zoom:0.5,表示缩小到原来的一半

使用 zoom 来”支持“ 12px 以下的字体

代码如下:

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

效果如下:

让chrome支持小于12px-的文字方式(多种方法),chrome,前端

需要注意的是,Zoom 并不是标准属性,需要考虑其兼容性

让chrome支持小于12px-的文字方式(多种方法),chrome,前端

-webkit-transform:scale()

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

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

实现代码如下:

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

效果如下:

让chrome支持小于12px-的文字方式(多种方法),chrome,前端

-webkit-text-size-adjust:none

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

属性值:

  • percentage:字体显示的大小;
  • auto:默认,字体大小会根据设备/浏览器来自动调整;
  • none:字体大小不会自动调整
html { -webkit-text-size-adjust: none; }

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

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

需要注意的是,自从chrome 27之后,就取消了对这个属性的支持。同时,该属性只对英文、数字生效,对中文不生效

三、总结

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

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

-webkit-text-size-adjust对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效文章来源地址https://www.toymoban.com/news/detail-829308.html

参考文献

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust
  • https://vue3js.cn/interview

到了这里,关于让chrome支持小于12px-的文字方式(多种方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp使用uni-swipe-action后右侧多了小于1px的间隙

    问题:uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题,但是在微信开发者工具中有问题。 代码如下:在滑动滑块或者点击这个区域时,就会出现问题。   怀疑是,父级容器cart-box和子级uni-swipe-action宽度没有完全相等导致。而容器都没有设置固定宽度值

    2024年02月15日
    浏览(45)
  • 查询手机号所属地,支持多种查询方式的API接口

    在现代社会,手机号已经成为人们生活和工作中不可缺少的一部分。而一个手机号可以初步反映出该号码的归属地信息。因此,查询手机号所属地已经成为人们日常生活中的常见需求。本篇文章将通过介绍一个支持多种查询方式的API接口来帮助读者更好地了解查询手机号所属

    2024年02月08日
    浏览(42)
  • 前端导出word文件的多种方式、前端导出excel文件

    先看效果: 这是页面中的table 这是导出后的效果: 需要的依赖: npm 自行安装,需要看官网的具体参数自行去github上面找对应的参数 具体代码:(先看word模板,在看代码,word中的变量和代码中 doc.setData() 是一一对应的) 包依赖: 代码 导出效果: 需要的依赖: node-xlsx 代码

    2024年03月24日
    浏览(95)
  • 【Redis从头学-12】Redis主从复制和读写分离的多种部署方式解析(普通方式、Docker搭建方式、Docker-Compose搭建方式)

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Redis从头学 应用 版本/型号 服务器 腾讯云轻量服务器 镜像 Centos 7.6 Docker 1.13.1 Redis redis-6.2.1 Docker-Compose 1.29.2 Redis发生

    2024年02月11日
    浏览(45)
  • 支持多种通信方式和协议方便接入第三方服务器或云平台

    2路RS485串口是一种常用的通信接口,可以支持Modbus Slave协议,并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议,可用于扩展多达48个Modbus Slave设备,如Modbus RTU远程数据采集模块、电表、水表、柴油发电机、变频器、PLC等。本文将详细介绍2路RS485串口的功能及应

    2024年02月15日
    浏览(45)
  • 前端传递Json格式,后端如何用多种方式接收

     一、先定义一个简单的实体类 二、编写前端传递的json数据 1.前端传递普通json,后端用对象接收 2.前端传递json数组, 3.前端传递json数组,后端用集合接收Josn数组

    2024年02月12日
    浏览(49)
  • Chrome 75不支持保存成mhtml的解决方法

    在Chrome 75之前,可以设置chrome://flags - save as mhtml来保存网页为mhtml。 升级新版,发现无法另存为/保存网页为MHTML了。 参考https://jingyan.baidu.com/article/a3761b2b7e39ec5576f9aad9.html 在网上搜索无果后,只得从chromium项目的commits中查找,原来chrome搞了个\\\"Chrome Flag Ownership\\\"的项目,目的是清

    2024年02月14日
    浏览(26)
  • 前端:下载文件(多种方法)

    一、简介 前端经常会有下载文件的需求,这里总结了几种常用的方法,方便日后查看。 二、a标签下载 a href=\\\"https://abc.png\\\" download=\\\"abc.png\\\" target=\\\"view_window\\\"下载/a 三、window.open下载 四、location.href 五、saveAs 六、loadFileSimply 6.1、loadFileSimply 6.2、fileDownload 6.3、使用 七、url下载 八、

    2024年02月13日
    浏览(38)
  • 前端vue调试工具:chrome浏览器vue-devtools安装方式详述

    vue-devtools官方文档,也可按照官方文档操作 下面将介绍chrome集成vue-devtools的两种方式 通过扩展-扩展程序-访问chrome应用商店输入vue-devtools搜索插件即可 下载源码选择对应的版本tag官方源码 我们这里选择最新版本v6.5.1 下载压缩包,或clone都可以*( 克隆命令: 安装依赖以及打

    2024年03月15日
    浏览(63)
  • 前端:深拷贝的多种方法(超全详解)

            别划走 !走过路过不要错过;错过这个村,我在下一个村等你!坚持每天进步一点点;一天两天可能没发现有效果;但一年365天后你将会感谢今天的自己!!!         今天博主带大家了解一下前端常用的深拷贝方法:(超全详解)        我们先举个例子: 说说

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包