前端开发攻略---打破Chrome的最小字号限制,设置任意字号大小

目录

1、原因

2、解决方法


1、原因

由于Chrome浏览器的限制,在网页中的字号默认最小为12px,更改为12px以下的字号大小是无效的

2、解决方法

1、在Chrome浏览器中调整字号最小值

优点:快,方便,

缺点:只对自己电脑上的Chrome浏览器生效。对别人电脑上的无效

2、使用CSS

使用css中的 **transform:scale(0.5)**对字体进行缩放

使用方法:比如需要得到10px的字体

1、先设置字体大小为20px

2、进行0.5倍缩放

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 20px;
        transform: scale(0.5);
      }
    </style>
  </head>
  <body>
    <div>1122</div>
  </body>
</html>

注意:

1、**transform: scale(0.5) 属性对行内元素无效!**需要转换为行内块元素或者块级元素

相关推荐
Aevget20 小时前
DevExtreme JS & ASP.NET Core v25.2新功能预览 - 字体栈、可访问性升级增强
javascript·asp.net·界面控件·devexpress·ui开发·devextreme
Ingsuifon20 小时前
ReAct智能体实现示例
前端·react.js·前端框架
IT古董20 小时前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第四篇:登录与注册系统(核心篇)
javascript·react.js·ui
q1508039622520 小时前
数据整理无忧:深度评测高效文本合并工具的实用功能
开发语言·前端·javascript
华仔啊20 小时前
async/await 到底要不要加 try-catch?异步错误处理最佳实践
前端·javascript
开发者小天21 小时前
React中useCallback的使用
前端·javascript·react.js·typescript·前端框架·css3·html5
咬人喵喵21 小时前
JavaScript 变量:let 和 const 该用谁?
前端·css·编辑器·交互·svg
麦麦大数据21 小时前
F059 vue+flask酒店对比系统
前端·vue.js·flask·携程·酒店对比·飞猪·同程
开发者小天21 小时前
React中的useState传入函数的好处
前端·javascript·react.js
Violet_YSWY21 小时前
Vue import.meta.env 讲解
前端·javascript·vue.js