当前位置： 首页 > news >正文

设置浏览器显示小于12px以下字体

news 2026/4/1 21:44:17

问题

我们在项目开发过程中有时候会遇到设计师给的小于12px的字体，IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的，但是谷歌浏览器上显示字体最小为12px，css设置font-size：10px，运行代码显示结果仍然是12px大小，那么这个我们怎么去解决呢？

使用缩放

transform: scale()是CSS中的一个用于缩放元素的属性。它的语法如下

transform: scale(x,y);

其中x和y是缩放比例。如果只设置一个参数，则元素将等比例地缩放。 当x和y都设置为1时，元素的大小将不会改变。

要放大元素，您可以设置x和y的值大于1，例如：

transform: scale(1.5);

那么我们就可以使用缩放属性来等比缩小字体，我们给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；如果要设置8px，那就是8/12=0.66666

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置浏览器显示小于12px以下字体</title>
</head>
<style>.box1 {font-size: 12px;}.box2 {font-size: 12px;transform: scale(0.83333);}.box3 {font-size: 12px;}.box4 {font-size: 12px;transform: scale(0.83333);display: block;}
</style><body><div class="box1">我是div标签12px的文字大小</div><div class="box2">我是div标签10px的文字大小</div><span class="box3">我是span标签12px的文字大小</span><span class="box4">我是span标签10px的文字大小</span>
</body></html>

注意点1：上面我们看出，缩小只对有宽高的标签有效，所以使用span等行内标签时，还需要将行内标签进行元素转换为块元素（display:block;）。

注意点2：文本进行缩放后，并不会改变其原来盒子的大小，只是视觉上改变了大小，也就是说如果文本有换行的时候，它进行缩放后仍然是折行显示，这显然不符合我们要求，所以我们还需要强制文本在一行显示，也就是 white-space: nowrap;

那么我们发现缩小了但是没有对齐，这个该怎么去解决呢？

设置transform-origin：0 0；

默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点，也就是transform-origin：0 0；该值有两个参数值，第一个是水平方位值，第二个是垂直方位值，对应的如果需要右对齐、或者是有缩进，那就改变对应的参数值即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置浏览器显示小于12px以下字体</title>
</head>
<style>.box1 {font-size: 12px;width: 200px;background: beige;}.box2 {font-size: 12px;background: beige;width: 200px;/* 缩小设置 */transform: scale(0.83333);/* 不换行设置 */white-space: nowrap;/* 对齐设置 */transform-origin: 0 0;}
</style><body><div class="box1">我是12px的文字大小我是12px的文字大小</div><div class="box2">我是10px的文字大小我是10px的文字大小</div>
</body></html>

这种缩放方式优点是单行、多行文本都可使用，缺点是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好。欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

 我的博客：前端小阳仔_Html,CSS,JavaScript,Vue,React,Angular领域博主

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

相关文章：

设置浏览器显示小于12px以下字体

问题 我们在项目开发过程中有时候会遇到设计师给的小于12px的字体&#xff0c;IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的&#xff0c;但是谷歌浏览器上显示字体最小为12px&#xff0c;css设置font-size&#xff1a;10px&#xff0c;运行代码显示结果仍然…...

编程日记 2024/3/15 9:36:00

web蓝桥杯真题：成语学习

代码&#xff1a; //TODO 点击文字后&#xff0c;在idiom从左到右第一个空的位置加上改文字 getSingleWord(val) {let index this.idiom.indexOf() //从左往右查询空字符串this.$set(this.idiom, index, val) //响应式更新 },// TODO 校验成语是否输入正确答案 confirm…...

编程日记 2024/3/15 9:34:59

外包干了5天，技术明显退步。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…...

编程日记 2024/3/15 9:33:58

Vue:自定义消息通知组件

一、效果描述 在JS中使用一个Message函数&#xff0c;弹出一个自定义的消息框。 效果体验&#xff1a;缓若江海凝清光 二、实现方式 1.新建一个消息组件 2.新建一个js文件&#xff0c;新建一个需要导出函数 3.在函数中新建一个Vue实例&#xff0c;并将消息组件挂载上去。…...

编程日记 2024/3/15 9:32:56

2023 收入最高的十大编程语言

本期共享的是 —— 地球上目前已知超过 200 种可用的编程语言&#xff0c;了解哪些语言在 2023 为开发者提供更高的薪水至关重要。 过去一年里&#xff0c;我分析了来自地球各地超过 1000 万个开发职位空缺&#xff0c;辅助我们了解市场&#xff0c;以及人气最高和收入最高的语…...

编程日记 2024/3/15 9:31:55

Github 2024-03-11 开源项目周报 Top15

根据Github Trendings的统计&#xff0c;本周(2024-03-11统计)共有15个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4TypeScript项目3Jupyter Notebook项目3C#项目1HTML项目1CSS项目1Dart项目1Lua项目1Shell项目1Rust…...

编程日记 2024/3/15 9:25:49

【DAY10 软考中级备考笔记】数据结构 图

数据结构 图 3月11日 – 天气&#xff1a;晴 晚上无线网络突然不能用了&#xff0c;花费好久弄这个&#xff0c;耽误了一些时间 1. 图的定义 这里需要注意完全图的定义&#xff0c;以及完全图的边数 这里需要注意连通图和连通分量的概念。 2. 图的存储结构 图有两种存储结构&a…...

编程日记 2024/3/15 9:24:47

java-ssm-jsp基于java的餐厅点餐系统的设计与实现

java-ssm-jsp基于java的餐厅点餐系统的设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全...

编程日记 2024/3/15 9:22:43

蓝桥杯(1):python排序

1 基础 1.1 输出 1.1.1 去掉输出的空格 print("Hello","World",123,sep"") print("hello",world,123,sep) print(hello,world,123) #输出结果 #HelloWorld123 #helloworld123 #hello world 123 1.1.2 以不同的方式结尾 print(&quo…...

编程日记 2024/3/15 9:21:41

SpringMVC请求、响应和拦截器的使用

SpringMVC请求 RequestMapping注解 RequestMapping注解的作用是建立请求URL和处理方法之间的对应关系 RequestMapping注解可以作用在方法和类上 1. 作用在类上&#xff1a;第一级的访问目录 2. 作用在方法上&#xff1a;第二级的访问目录 3. 细节&#xff1a;路径可以不编写…...

编程日记 2024/3/15 9:18:38

基于springboot+layui仓库管理系统设计和实现

基于 java springbootlayui仓库管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…...

编程日记 2024/3/15 9:11:30

【开源-土拨鼠充电系统】鸿蒙 HarmonyOS 4.0+微信小程序+云平台

本人自己开发的开源项目&#xff1a;土拨鼠充电系统 ✍GitHub开源项目地址&#x1f449;&#xff1a;https://github.com/cheinlu/groundhog-charging-system ✍Gitee开源项目地址&#x1f449;&#xff1a;https://gitee.com/cheinlu/groundhog-charging-system ✨踩坑不易&am…...

编程日记 2024/3/15 9:09:28

[抽象]工厂模式（[Abstract] Factory）——创建型模式

[抽象]工厂模式——创建型模式 什么是抽象工厂&#xff1f; 抽象工厂模式是一种创建型设计模式&#xff0c;让你能够保证在客户端程序中创建一系列有依赖的对象组时&#xff0c;无需关心这些对象的类型。 具体来说&#xff1a; 对象的创建与使用分离&#xff1a; 抽象工厂模…...

编程日记 2024/3/15 9:08:27

QT网络编程之实现UDP广播发送和接收

推荐一个不错的人工智能学习网站&#xff0c;通俗易懂&#xff0c;内容全面&#xff0c;作为入门科普和学习提升都不错&#xff0c;分享一下给大家&#xff1a;前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类&#xff1a;QUdpSocket、QHost…...

编程日记 2024/3/15 9:06:23

SSL VPN基础原理

目录 SSL ---安全传输协议&#xff08;安全套接层&#xff09;---TLS ----传输层安全协议 SSL的工作原理 SSL会话建立的过程 ​编辑 数据传输过程中的封装示意图 无客户端认证的过程 有客户端认证的过程 SSL VPN的核心技术---虚拟网关技术 服务器验证的点&#xff1a; 资源…...

编程日记 2024/3/15 9:05:22

深入理解FTP协议：文件传输的桥梁

深入理解FTP协议&#xff1a;文件传输的桥梁 在数字化时代&#xff0c;文件传输协议&#xff08;FTP&#xff09;是互联网上进行文件交换的重要手段。FTP允许用户在不同的计算机之间传输文件&#xff0c;无论是上传还是下载&#xff0c;都提供了一种稳定且高效的方式。本文将深…...

编程日记 2024/3/15 9:04:21

数字化转型导师坚鹏：金融机构数字化运营

金融机构数字化运营 课程背景&#xff1a; 很多金融机构存在以下问题&#xff1a; 不清楚数字化运营对金融机构发展有什么影响&#xff1f; 不知道如何提升金融机构数字化运营能力&#xff1f; 不知道金融机构如何开展数字化运营工作&#xff1f; 课程特色&#xff1a;…...

编程日记 2024/3/15 9:03:19

一、C#冒泡排序算法

一、C#冒泡排序算法 简介 冒泡排序算法是一种基础的排序算法&#xff0c;它的实现原理比较简单。核心思想是通过相邻元素的比较和交换来将最大&#xff08;或最小&#xff09;的元素逐步"冒泡"到数列的末尾。 实现原理 冒泡排序是一种简单的排序算法&#xff0c;其…...

编程日记 2024/3/15 8:58:14

docker部署mysql5

1. 进入面板 2. 新建挂载文件夹 新建三个文件夹: mkdir -p /docker/mysql5/config && mkdir -p /docker/mysql5/data && mkdir -p /docker/mysql5/logsconfig&#xff1a;存放mysql配置data&#xff1a;存放mysql数据logs&#xff1a;存放mysql记录日志 3.…...

编程日记 2024/3/15 8:57:13

Github 2024-03-15 Java开源项目日报 Top10

根据Github Trendings的统计，今日(2024-03-15统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Java项目9非开发语言项目1TypeScript项目1《Hello 算法》：动画图解、一键运行的数据结构与算法教程 创建周期：476 天协议类型：OtherStar数量…...

编程日记 2024/3/15 8:56:13

WeClaw_42_Agent工具注册全链路：从BaseTool到意图识别的标准化接入

WeClaw_42_Agent工具注册全链路&#xff1a;从BaseTool到意图识别的标准化接入作者: WeClaw 开发团队 日期: 2026-03-29 版本: v1.0 标签: Agent 工具、BaseTool、意图识别、渐进式暴露、延迟注入&#x1f4d6; 摘要 本文系统讲解 WeClaw Agent 工具注册的完整链路。当需要将一…...

编程新知 2026/4/1 21:32:32

VCS编译SystemVerilog时，那个‘-P’选项你加对了吗？详解Verdi PLI配置

VCS编译SystemVerilog时&#xff0c;那个‘-P’选项你加对了吗&#xff1f;详解Verdi PLI配置 在芯片验证的日常工作中&#xff0c;VCSVerdi的组合堪称黄金搭档。但当你满怀信心地敲下编译命令&#xff0c;却发现怎么也生成不了关键的fsdb波形文件时&#xff0c;那种挫败感简直…...

编程新知 2026/4/1 19:49:16

终极指南：3步用VR-Reversal将3D视频转为2D，普通设备也能自由探索VR世界

终极指南&#xff1a;3步用VR-Reversal将3D视频转为2D&#xff0c;普通设备也能自由探索VR世界 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址…...

编程新知 2026/4/1 17:49:31

PS插件加载失败？手把手教你用注册表修复PS2017-2022扩展未签署问题

PS插件加载失败&#xff1f;手把手教你用注册表修复PS2017-2022扩展未签署问题 当你在Photoshop中安装新插件时&#xff0c;突然弹出"扩展未经正确签署"的错误提示&#xff0c;这种挫败感我深有体会。作为一名长期与PS插件打交道的设计师&#xff0c;这个问题几乎成…...

编程新知 2026/4/1 17:29:04

VS Code高效调试：自定义console.log快捷键与智能代码片段配置

1. 为什么需要自定义console.log快捷键&#xff1f; 每次调试JavaScript代码时&#xff0c;手动输入完整的console.log语句实在是一件让人抓狂的事情。想象一下这样的场景&#xff1a;你正在调试一个复杂的Vue组件&#xff0c;需要快速查看某个变量的值。按照传统方式&#xf…...

编程新知 2026/4/1 17:18:31

R语言实战：利用compareGroups包高效生成临床研究三线表(Table1)

1. 为什么临床研究离不开Table1三线表 在医学论文和临床研究报告中&#xff0c;Table1三线表几乎是标配。我第一次投稿时&#xff0c;审稿人直接指出"缺少规范的基线特征表"&#xff0c;这才意识到这个表格的重要性。Table1的核心作用是展示研究人群的基线特征&#…...

编程新知 2026/4/1 16:00:32

Pixel Fashion Atelier部署案例：中小企业低成本GPU算力优化生成方案

Pixel Fashion Atelier部署案例&#xff1a;中小企业低成本GPU算力优化生成方案 1. 项目概述与核心价值 Pixel Fashion Atelier是一款专为时尚设计领域打造的AI图像生成工作站&#xff0c;基于Stable Diffusion和Anything-v5模型构建。与传统AI工具不同&#xff0c;它采用独特…...

编程新知 2026/4/1 14:59:27

健康管理APP的“专业度悖论“：当8亿用户遇上AI幻觉

——2026年数字医疗市场的信任构建与分化艾瑞咨询2026年数据显示&#xff0c;中国移动医疗用户规模突破8亿&#xff0c;市场规模达1.5万亿元。但另一组数据更值得玩味&#xff1a;用户人均单日使用时长8.1分钟&#xff0c;深夜10点至凌晨2点的咨询量占比23%&#xff0c;而整体付…...

编程新知 2026/4/1 14:22:08

Sulpho-Methyltetrazine-NHS ester，磺化甲基四嗪-琥珀酰亚胺酯的结构特点与功能

Sulpho-Methyltetrazine-NHS ester 是一种结合了磺酸基团、甲基四嗪和 NHS 酯三大功能模块的化学试剂&#xff0c;在生物化学和药物研发等领域具有广泛应用。以下是对其详细介绍&#xff1a;一、基本信息英文名称&#xff1a;Sulpho-Methyltetrazine-NHS ester&#xff08;或 S…...

编程新知 2026/4/1 12:16:11

解锁AI编程新范式：Continue插件的颠覆性开发体验

解锁AI编程新范式&#xff1a;Continue插件的颠覆性开发体验 【免费下载链接】continue ⏩ Source-controlled AI checks, enforceable in CI. Powered by the open-source Continue CLI 项目地址: https://gitcode.com/GitHub_Trending/co/continue 你是否曾在深夜调试…...

编程新知 2026/4/1 12:08:08