让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;其维…

【深度学习】实验 — 动手实现 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…

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

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

【天线&空中农业】作物病害检测系统源码&数据集全套:改进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语言】动态内存开辟

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

Excel:vba实现插入图片

实现的效果&#xff1a; 实现的代码&#xff1a; Sub InsertImageNamesAndPictures()Dim PicPath As StringDim PicName As StringDim PicFullPath As StringDim RowNum As IntegerDim Pic As ObjectDim Name As String 防止表格里面有脏数据Cells.Clear 遍历工作表中的每个图…

6.FreeRTOS之任务通知

什么是任务通知&#xff1f; FreeRTOS 从版本 V8.2.0 开始提供任务通知这个功能&#xff0c;每个任务都有一个 32 位的通知值。按照 FreeRTOS 官方的说法&#xff0c;使用消息通知比通过二进制信号量方式解除阻塞任务快 45% &#xff0c; 并且更加 省内存&#xff08;无需创…

前端之html(一)

HTML定义: HTML 超文本标记语言 (1)骨架: HTML:整个网页 head:网页头部 boby:网页主体 title:网页标题 (2)标签关系: 1.嵌套 2.并列 (3)注释 语法:<!-- ... --> 基础: (4) 标签:双标签:<> ... </> 单标签:<> <br> …

书生第四期实训营基础岛——L1G3000浦语提示词工程实践

基础任务 任务要求 背景问题&#xff1a;近期相关研究指出&#xff0c;在处理特定文本分析任务时&#xff0c;语言模型的表现有时会遇到挑战&#xff0c;例如在分析单词内部的具体字母数量时可能会出现错误。任务要求&#xff1a;利用对提示词的精确设计&#xff0c;引导语言…

Android启动流程_SystemServer阶段

前言 上一篇文档我们描述了在 Android 启动流程中 Zygote 部分的内容&#xff0c;从 Zygote 的配置、启动、初始化等内容展开&#xff0c;描述了 Zygote 在 Android 启动中的功能逻辑。本篇文档将会继续 Android 启动流程的描述&#xff0c;从 SystemServer 进程的内容展开&am…

Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶

CustomScrollView 效果 1. 关键组件 CustomScrollView, SliverOverlapAbsorber, SliverPersistentHeader 2. 关键内容 TLDR SliverOverlapAbsorber 包住 pinned为 true 的组件 可以被CustomScrollView 忽略高度。 以下的全部内容的都为了阐述上面这句话。初阶 Flutter 开发知…