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

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

news 2026/4/1 23:24:51

问题

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

Fix | Resolving ImportError: libGL.so.1 Missing in Docker/Local Environments

1. 遇到libGL.so.1缺失报错怎么办&#xff1f; 最近在部署一个基于OpenGL的图形处理项目时&#xff0c;又双叒叕遇到了这个熟悉的报错&#xff1a;"ImportError: libGL.so.1: cannot open shared object file: No such file or directory"。这已经是这个月第三次碰到…...

编程新知 2026/4/1 23:18:05

AI报告文档审核助力生态数据可信化：IACheck提升生物多样性调查报告物种识别准确性

在生态环境保护逐渐走向精细化管理的背景下&#xff0c;生物多样性调查数据的重要性不断提升。从自然保护区评估到生态修复项目&#xff0c;从环境影响评价到长期生态监测&#xff0c;物种数据已成为支撑决策的重要基础。而在这些数据中&#xff0c;“物种识别的准确性”&#…...

编程新知 2026/4/1 22:35:30

485总线硬件设计必看：电平匹配、TVS防护，还有exmodbus库快速上手

RS485是工业物联网的标配通信接口。合宙Air780EHV系列Cat.1模组凭借强大外设扩展能力&#xff08;LCD、摄像头、以太网、CAN等&#xff09;和LuatOS高效开发环境&#xff0c;支持TCP/MQTT/HTTP/Modbus等主流协议&#xff0c;是工业场景的高性价比之选。 本文聚焦RS485实战&…...

编程新知 2026/4/1 22:23:19

终极指南：如何用res-downloader一键下载全网无水印资源

终极指南&#xff1a;如何用res-downloader一键下载全网无水印资源 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...

编程新知 2026/4/1 22:23:19

SDMatte部署避坑指南：首次加载延迟、模型切换等待、端口冲突解决方案

SDMatte部署避坑指南&#xff1a;首次加载延迟、模型切换等待、端口冲突解决方案 1. 为什么选择SDMatte进行图像抠图 SDMatte是一款专为高质量图像抠图设计的AI模型&#xff0c;特别适合处理那些传统抠图工具难以应对的复杂场景。想象一下&#xff0c;你需要把玻璃杯从背景中…...

编程新知 2026/4/1 22:09:10

前端 HTML 转 PDF

spdf 两个库转换成 PDF 文件并下载到本地。 简单说&#xff1a;它能让用户 “一键下载” 网页上的某个区域为 PDF&#xff08;比如报表、数据统计页、合同预览页等&#xff09;&#xff0c;还预留了 “水印功能” 的注释代码&#xff08;可按需启用&#xff09;。 核心依赖说…...

编程新知 2026/4/1 21:26:31

PX4固件二次开发入门：从源码结构到第一个自定义模块（基于v1.11版本）

PX4固件二次开发实战&#xff1a;从源码解析到自定义模块开发&#xff08;v1.11版本&#xff09; 当你第一次打开PX4的源码仓库&#xff0c;面对数十个文件夹和数千个文件时&#xff0c;那种扑面而来的压迫感我深有体会。作为过来人&#xff0c;我想分享一套系统性的二次开发方…...

编程新知 2026/4/1 21:10:12

从毕设到实战：手把手教你用PyTorch复现麦克风阵列声源定位（附完整代码与SLoClas数据集）

从零构建声源定位系统&#xff1a;PyTorch实战指南与SLoClas数据集深度解析 1. 声源定位技术概述与应用场景 声源定位技术在现代音频处理领域扮演着关键角色&#xff0c;它通过分析声音信号的空间特性来确定声源的位置信息。这项技术在智能家居、视频会议系统、安防监控、机器人…...

编程新知 2026/4/1 19:35:11

CRT库链接冲突详解：为什么你的Visual Studio项目会警告LNK4098（含/NODEFAULTLIB使用指南）

CRT库链接冲突深度解析&#xff1a;从原理到实战解决LNK4098警告 当你用Visual Studio编译C项目时&#xff0c;突然蹦出"warning LNK4098: 默认库msvcrtd.lib与其他库的使用冲突"的提示&#xff0c;这就像开车时仪表盘突然亮起的警告灯——它不会立即让引擎熄火&…...

编程新知 2026/4/1 19:33:11

手把手教你搭建PaddleOCR开发环境：从CUDA配置到模型验证

1. 环境准备&#xff1a;从零搭建PaddleOCR开发环境 最近在做一个票据识别的项目&#xff0c;需要用到OCR技术。对比了几种开源方案后&#xff0c;发现PaddleOCR不仅识别准确率高&#xff0c;而且对中文支持特别好。但在搭建环境时踩了不少坑&#xff0c;特别是CUDA和cuDNN的版…...

编程新知 2026/4/1 18:12:25