让Chrome⽀持⼩于12px 的⽂字⽅式有哪些?区别?

让Chrome⽀持⼩于12px 的⽂字⽅式有哪些?区别?

1、背景

Chrome 中⽂版浏览器会默认设定⻚⾯的最⼩字号是12px,英⽂版没有限制 原由 Chrome 团队认为汉字⼩于12px就会增加识别难度
• 中⽂版浏览器 与⽹⻚语⾔⽆关,取决于⽤户在Chrome的设置⾥(chrome://settings/languages)把哪种语⾔设置 为默认显⽰语⾔
• 系统级最⼩字号 浏览器默认设定⻚⾯的最⼩字号,⽤户可以前往 chrome://settings/fonts 根据需求更改 ⽽我们在实际项⽬中,不能奢求⽤户更改浏览器设置 对于⽂本需要以更⼩的字号来显⽰,就需要⽤到⼀些⼩技巧

2、 解决⽅案

常⻅的解决⽅案有:
• zoom
• -webkit-transform:scale()
• -webkit-text-size-adjust:none

2.1 Zoom

zoom 的字⾯意思是“变焦”,可以改变⻚⾯上元素的尺⼨,属于真实尺⼨ 其⽀持的值类型有:
• zoom:50%,表⽰缩⼩到原来的⼀半
• zoom:0.5,表⽰缩⼩到原来的⼀半
使⽤ zoom 来”⽀持“ 12px 以下的字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小于12px文字</title><style type="text/css">.span1 {font-size: 12px;display: inline-block;zoom: 0.8;}.span2 {display: inline-block;font-size: 12px;}</style>
</head><body><span class="span1">测试10px</span> <span class="span2">测试12px</span>
</body>
</html>

效果如下:
在这里插入图片描述
需要注意的是, Zoom 并不是标准属性,需要考虑其兼容性

2.1 -webkit-transform:scale()

针对 chrome 浏览器,加 webkit 前缀,⽤ transform:scale() 这个属性进⾏放缩 注意的是,使⽤ scale 属性只对可以定义宽⾼的元素⽣效,所以,下⾯代码中将 span 元素转为⾏ 内块元素
实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小于12px文字</title><style type="text/css">.span1 {font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}.span2 {display: inline-block;font-size: 12px;}.span3 {display: inline-block;font-size: 14px;}</style>
</head><body><span class="span1">测试10px</span> <span class="span2">测试12px</span><span class="span3">测试14px</span>
</body>
</html>

效果如下:
在这里插入图片描述

2.1 -webkit-text-size-adjust:none

该属性⽤来设定⽂字⼤⼩是否根据设备(浏览器)来⾃动调整显⽰⼤⼩
属性值:
• percentage:字体显⽰的⼤⼩;
• auto:默认,字体⼤⼩会根据设备/浏览器来⾃动调整;
• none:字体⼤⼩不会⾃动调整

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

这样设置之后会有⼀个问题,就是当你放⼤⽹⻚时,⼀般情况下字体也会随着变⼤,⽽设置了以上代 码后,字体只会显⽰你当前设置的字体⼤⼩,不会随着⽹⻚放⼤⽽变⼤了
所以,我们不建议全局应⽤该属性,⽽是单独对某⼀属性使⽤
需要注意的是,⾃从 chrome 27 之后,就取消了对这个属性的⽀持。同时,该属性只对英⽂、数字 ⽣效,对中⽂不⽣效

3.、总结

Zoom ⾮标属性,有兼容问题,缩放会改变了元素占据的空间⼤⼩,触发重排
-webkit-transform:scale() ⼤部分现代浏览器⽀持,并且对英⽂、数字、中⽂也能够⽣效, 缩放不会改变了元素占据的空间⼤⼩,⻚⾯布局不会发⽣变化
-webkit-text-size-adjust 对⾕歌浏览器有版本要求,在27之后,就取消了该属性的⽀持,并 且只对英⽂、数字⽣效

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Word首行空格不显示空格符号问题

Word段落首行空格设置指南 问题描述 在Word中编辑文档时&#xff0c;有时会遇到段落首行敲击空格键却不显示空格的问题。这通常与Word的自动更正设置有关。 解决方法 要解决此问题&#xff0c;需要调整Word的自动更正设置。具体步骤如下&#xff1a; 打开Word的"自动更…

极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果

目录 前言 1.弹性放大按钮效果 2.旋转和缩放组合动画 3.颜色渐变背景动画 4.缩放进出效果 前言 在上一篇文章中&#xff0c;我们介绍了Flutter中的隐式动画的一些相关知识&#xff0c;在这篇文章中,我们可以结合多个隐式动画 Widget 在 Flutter 中创建一些酷炫的视觉效果&…

助力风力发电风机设备智能化巡检,基于YOLOv3全系列【tiny/l/spp】参数模型开发构建无人机巡检场景下风机叶片缺陷问题智能化检测预警模型

在全球能源转型的大潮中&#xff0c;清洁环境能源的发展已成为各国关注的焦点。风力发电作为其中的佼佼者&#xff0c;以其可再生、无污染的特点&#xff0c;受到了广泛的青睐。然而&#xff0c;风力发电设施大多建于人迹罕至的地区&#xff0c;设备庞大且复杂&#xff0c;其维…

穷举vs暴搜vs深搜vs回溯vs剪枝 算法专题

一. 全排列 全排列 class Solution {List<List<Integer>> ret;List<Integer> path;boolean[] check;public List<List<Integer>> permute(int[] nums) {ret new ArrayList<>();//存放结果path new ArrayList<>();存放每个路径的…

【深度学习】实验 — 动手实现 GPT【三】:LLM架构、LayerNorm、GELU激活函数

【深度学习】实验 — 动手实现 GPT【三】&#xff1a;LLM架构、LayerNorm、GELU激活函数 模型定义编码一个大型语言模型&#xff08;LLM&#xff09;架构 使用层归一化对激活值进行归一化LayerNorm代码实现scale和shift 实现带有 GELU 激活的前馈网络测试 模型定义 编码一个大…

进程守护SuperVisord内部的进程定时监测并重启

一个swoole的wensocket程序运行在SuperVisord下端口9503 设置一个每分钟任务监测9503的端口链接数&#xff0c;输出链接数&#xff0c;并在链接数为0的情况下重启wensocket进程。 以下截图是宝塔面板环境下 #!/bin/bash current$(date %H.%M) ws9503_procnumnetstat -nat | gre…

ChatGPT搜索引擎推出Chrome插件

此扩展程序将使 ChatGPT 成为 Chrome 中的默认搜索引擎。点击安装chrome扩展插件。 将 ChatGPT 设置为默认搜索引擎后&#xff0c;您可以直接通过浏览器 URL 栏进行搜索。 ChatGPT 现在可以比以前更好地搜索网络。您可以快速、及时地获得答案&#xff0c;并附上相关网络资源的…

常见生成式模型汇总

生成式模型是一类通过学习数据的分布来生成新的、与原始数据类似样本的模型。以下是一些常见的生成式模型及其应用场景&#xff1a; 1. 生成对抗网络 (GANs) 生成对抗网络&#xff08;Generative Adversarial Networks&#xff09;是一种由生成器和判别器组成的模型&#xff…

深度学习每周学习总结J4(ResDenseNet 算法探索实践 - 鸟类识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 一&#xff1a;回顾与总结&#xff1a; 三种神经网络模型对比研究及尝试构成新的网络结构模型卷积计算过程ResNet-50 模型1. 关于残差…

IntelliJ IDEA使用技巧与插件推荐

IntelliJ IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助开发者提高编码效率。本文将介绍一些IntelliJ IDEA的使用技巧以及实用的插件推荐。 一、IntelliJ IDEA使用技巧 快捷键操作 IntelliJ IDEA支持大量…

systemctl restart NetworkManager 重启后,文件/etc/resolv.conf修改失败

如果你在重启 NetworkManager 之后发现无法修改 /etc/resolv.conf 文件,这是因为 NetworkManager 会自动管理这个文件 为了解决这个问题,你可以采取以下两种方法之一: 方法一:禁用 NetworkManager 服务 使用以下命令停止 NetworkManager 服务:sudo systemctl stop Netwo…

【天线&空中农业】作物病害检测系统源码&数据集全套:改进yolo11-EfficientFormerV2

改进yolo11-attention等200全套创新点大全&#xff1a;作物病害检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者…

Linux版更新流程

一.下载更新包 下载地址&#xff1a;https://www.nvisual.com/%e4%b8%8b%e8%bd%bd/ 二.更新包组成 更新包由三部分组成&#xff1a; 前端更新包&#xff1a;压缩的ZIP文件&#xff0c;例如&#xff1a;dist-2.2.26-20231227.zip (2.2.26是版本号 20231227是发布日期)后端更…

c++仿函数--通俗易懂

1.仿函数是什么 仿函数也叫函数对象&#xff0c;是一种可以像函数一样被调用的对象。从编程实现的角度看&#xff0c;它是一个类&#xff0c;不过这个类重载了函数调用运算符() class Add { public:int operator()(int a, int b) {return a b;} }; 注意&#xff1a;使用的时…

《中安证件阅读机:边检执法办案的得力助手》

在边检执法办案的过程中&#xff0c;高效、准确地识别和查验各类证件至关重要。而中安证件阅读机的出现&#xff0c;为边检工作带来了极大的便利&#xff0c;成为了边检执法人员的得力助手。 一、中安证件阅读机的强大功能 中安证件阅读机具备先进的技术和丰富的功能。它能够快…

计算机网络:网络层 —— IP数据报的发送和转发过程

文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程&#xff1a; 主机发送IP数据报路由器转发IP数据报 直接交付&#xff1a;源主机与目的主机在同一网络中间接交付&#xff1a;…

104. UE5 GAS RPG 实现技能火焰爆炸

这一篇文章我们再实现一个技能火焰爆炸&#xff0c;由于我们之前已经实现了三个玩家技能&#xff0c;这一个技能有一些总结的味道&#xff0c;对于创建技能相同的部分&#xff0c;长话短说&#xff0c;我们过一遍。 准备工作 我们需要一个技能类&#xff0c;继承于伤害技能基…

C#制作学生管理系统

定义学生类 定义一个简单的类来表示学生&#xff0c;包括学号、姓名、性别、年龄、电话、地址。再给其添加一个方法利于后续添加方法查看学生信息。 //定义学生类 public class student {public int ID { get; set; }//开放读写权限public string Name { get; set; }public i…

【C语言】动态内存开辟

写在前面 C语言中有不少开辟空间的办法&#xff0c;但是在堆上开辟的方法也就只有动态内存开辟&#xff0c;其访问特性与数组相似&#xff0c;但最大区别是数组是开辟在栈上&#xff0c;而动态内存开辟是开辟在堆上的。这篇笔记就让不才娓娓道来。 PS:本篇没有目录实在抱歉CSD…