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

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

news 2026/2/11 4:03:00

问题

我们在项目开发过程中有时候会遇到设计师给的小于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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/10 23:35:00

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2026/2/10 8:01:27

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39