设置浏览器显示小于12px以下字体
问题
我们在项目开发过程中有时候会遇到设计师给的小于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的字体,IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的,但是谷歌浏览器上显示字体最小为12px,css设置font-size:10px,运行代码显示结果仍然…...
web蓝桥杯真题:成语学习
代码: //TODO 点击文字后,在idiom从左到右第一个空的位置加上改文字 getSingleWord(val) {let index this.idiom.indexOf() //从左往右查询空字符串this.$set(this.idiom, index, val) //响应式更新 },// TODO 校验成语是否输入正确答案 confirm…...
外包干了5天,技术明显退步。。。。。
先说一下自己的情况,本科生,19年通过校招进入南京某软件公司,干了接近2年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…...
Vue:自定义消息通知组件
一、效果描述 在JS中使用一个Message函数,弹出一个自定义的消息框。 效果体验:缓若江海凝清光 二、实现方式 1.新建一个消息组件 2.新建一个js文件,新建一个需要导出函数 3.在函数中新建一个Vue实例,并将消息组件挂载上去。…...
2023 收入最高的十大编程语言
本期共享的是 —— 地球上目前已知超过 200 种可用的编程语言,了解哪些语言在 2023 为开发者提供更高的薪水至关重要。 过去一年里,我分析了来自地球各地超过 1000 万个开发职位空缺,辅助我们了解市场,以及人气最高和收入最高的语…...
Github 2024-03-11 开源项目周报 Top15
根据Github Trendings的统计,本周(2024-03-11统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4TypeScript项目3Jupyter Notebook项目3C#项目1HTML项目1CSS项目1Dart项目1Lua项目1Shell项目1Rust…...
【DAY10 软考中级备考笔记】数据结构 图
数据结构 图 3月11日 – 天气:晴 晚上无线网络突然不能用了,花费好久弄这个,耽误了一些时间 1. 图的定义 这里需要注意完全图的定义,以及完全图的边数 这里需要注意连通图和连通分量的概念。 2. 图的存储结构 图有两种存储结构&a…...
java-ssm-jsp基于java的餐厅点餐系统的设计与实现
java-ssm-jsp基于java的餐厅点餐系统的设计与实现 获取源码——》公主号:计算机专业毕设大全...
蓝桥杯(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…...
SpringMVC请求、响应和拦截器的使用
SpringMVC请求 RequestMapping注解 RequestMapping注解的作用是建立请求URL和处理方法之间的对应关系 RequestMapping注解可以作用在方法和类上 1. 作用在类上:第一级的访问目录 2. 作用在方法上:第二级的访问目录 3. 细节:路径可以不编写…...
基于springboot+layui仓库管理系统设计和实现
基于 java springbootlayui仓库管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…...
【开源-土拨鼠充电系统】鸿蒙 HarmonyOS 4.0+微信小程序+云平台
本人自己开发的开源项目:土拨鼠充电系统 ✍GitHub开源项目地址👉:https://github.com/cheinlu/groundhog-charging-system ✍Gitee开源项目地址👉:https://gitee.com/cheinlu/groundhog-charging-system ✨踩坑不易&am…...
[抽象]工厂模式([Abstract] Factory)——创建型模式
[抽象]工厂模式——创建型模式 什么是抽象工厂? 抽象工厂模式是一种创建型设计模式,让你能够保证在客户端程序中创建一系列有依赖的对象组时,无需关心这些对象的类型。 具体来说: 对象的创建与使用分离: 抽象工厂模…...
QT网络编程之实现UDP广播发送和接收
推荐一个不错的人工智能学习网站,通俗易懂,内容全面,作为入门科普和学习提升都不错,分享一下给大家:前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类:QUdpSocket、QHost…...
SSL VPN基础原理
目录 SSL ---安全传输协议(安全套接层)---TLS ----传输层安全协议 SSL的工作原理 SSL会话建立的过程 编辑 数据传输过程中的封装示意图 无客户端认证的过程 有客户端认证的过程 SSL VPN的核心技术---虚拟网关技术 服务器验证的点: 资源…...
深入理解FTP协议:文件传输的桥梁
深入理解FTP协议:文件传输的桥梁 在数字化时代,文件传输协议(FTP)是互联网上进行文件交换的重要手段。FTP允许用户在不同的计算机之间传输文件,无论是上传还是下载,都提供了一种稳定且高效的方式。本文将深…...
数字化转型导师坚鹏:金融机构数字化运营
金融机构数字化运营 课程背景: 很多金融机构存在以下问题: 不清楚数字化运营对金融机构发展有什么影响? 不知道如何提升金融机构数字化运营能力? 不知道金融机构如何开展数字化运营工作? 课程特色:…...
一、C#冒泡排序算法
一、C#冒泡排序算法 简介 冒泡排序算法是一种基础的排序算法,它的实现原理比较简单。核心思想是通过相邻元素的比较和交换来将最大(或最小)的元素逐步"冒泡"到数列的末尾。 实现原理 冒泡排序是一种简单的排序算法,其…...
docker部署mysql5
1. 进入面板 2. 新建挂载文件夹 新建三个文件夹: mkdir -p /docker/mysql5/config && mkdir -p /docker/mysql5/data && mkdir -p /docker/mysql5/logsconfig:存放mysql配置data:存放mysql数据logs:存放mysql记录日志 3.…...
Github 2024-03-15 Java开源项目日报 Top10
根据Github Trendings的统计,今日(2024-03-15统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目9非开发语言项目1TypeScript项目1《Hello 算法》:动画图解、一键运行的数据结构与算法教程 创建周期:476 天协议类型:OtherStar数量…...
Fix | Resolving ImportError: libGL.so.1 Missing in Docker/Local Environments
1. 遇到libGL.so.1缺失报错怎么办? 最近在部署一个基于OpenGL的图形处理项目时,又双叒叕遇到了这个熟悉的报错:"ImportError: libGL.so.1: cannot open shared object file: No such file or directory"。这已经是这个月第三次碰到…...
AI报告文档审核助力生态数据可信化:IACheck提升生物多样性调查报告物种识别准确性
在生态环境保护逐渐走向精细化管理的背景下,生物多样性调查数据的重要性不断提升。从自然保护区评估到生态修复项目,从环境影响评价到长期生态监测,物种数据已成为支撑决策的重要基础。而在这些数据中,“物种识别的准确性”&#…...
485总线硬件设计必看:电平匹配、TVS防护,还有exmodbus库快速上手
RS485是工业物联网的标配通信接口。合宙Air780EHV系列Cat.1模组凭借强大外设扩展能力(LCD、摄像头、以太网、CAN等)和LuatOS高效开发环境,支持TCP/MQTT/HTTP/Modbus等主流协议,是工业场景的高性价比之选。 本文聚焦RS485实战&…...
终极指南:如何用res-downloader一键下载全网无水印资源
终极指南:如何用res-downloader一键下载全网无水印资源 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...
SDMatte部署避坑指南:首次加载延迟、模型切换等待、端口冲突解决方案
SDMatte部署避坑指南:首次加载延迟、模型切换等待、端口冲突解决方案 1. 为什么选择SDMatte进行图像抠图 SDMatte是一款专为高质量图像抠图设计的AI模型,特别适合处理那些传统抠图工具难以应对的复杂场景。想象一下,你需要把玻璃杯从背景中…...
前端 HTML 转 PDF
spdf 两个库转换成 PDF 文件并下载到本地。 简单说:它能让用户 “一键下载” 网页上的某个区域为 PDF(比如报表、数据统计页、合同预览页等),还预留了 “水印功能” 的注释代码(可按需启用)。 核心依赖说…...
PX4固件二次开发入门:从源码结构到第一个自定义模块(基于v1.11版本)
PX4固件二次开发实战:从源码解析到自定义模块开发(v1.11版本) 当你第一次打开PX4的源码仓库,面对数十个文件夹和数千个文件时,那种扑面而来的压迫感我深有体会。作为过来人,我想分享一套系统性的二次开发方…...
从毕设到实战:手把手教你用PyTorch复现麦克风阵列声源定位(附完整代码与SLoClas数据集)
从零构建声源定位系统:PyTorch实战指南与SLoClas数据集深度解析 1. 声源定位技术概述与应用场景 声源定位技术在现代音频处理领域扮演着关键角色,它通过分析声音信号的空间特性来确定声源的位置信息。这项技术在智能家居、视频会议系统、安防监控、机器人…...
CRT库链接冲突详解:为什么你的Visual Studio项目会警告LNK4098(含/NODEFAULTLIB使用指南)
CRT库链接冲突深度解析:从原理到实战解决LNK4098警告 当你用Visual Studio编译C项目时,突然蹦出"warning LNK4098: 默认库msvcrtd.lib与其他库的使用冲突"的提示,这就像开车时仪表盘突然亮起的警告灯——它不会立即让引擎熄火&…...
手把手教你搭建PaddleOCR开发环境:从CUDA配置到模型验证
1. 环境准备:从零搭建PaddleOCR开发环境 最近在做一个票据识别的项目,需要用到OCR技术。对比了几种开源方案后,发现PaddleOCR不仅识别准确率高,而且对中文支持特别好。但在搭建环境时踩了不少坑,特别是CUDA和cuDNN的版…...
