位置: IT常识 - 正文

设置浏览器显示小于12px以下字体的三种方法(设置浏览器显示网络异常)

编辑:rootadmin
设置浏览器显示小于12px以下字体的三种方法 使用场景:

推荐整理分享设置浏览器显示小于12px以下字体的三种方法(设置浏览器显示网络异常),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:电脑启动蓝屏0x0000006b怎么解决,浏览器怎么设置显示当前页面,设置浏览器显示比例,设置浏览器显示浏览记录,设置浏览器显示比例,浏览器怎么设置显示当前页面,设置浏览器显示浏览记录,设置浏览器显示网络异常,内容如对您有帮助,希望把文章链接给更多的朋友!

以往设计图给的字号一般最小就是12px, 开发人员一般是使用谷歌浏览器来进行调试运行。 谷歌浏览器上显示字体最小为12px,css设置font-size:10px,运行代码显示结果仍然是12px大小,但是挡不住甲方有时就是强调使用的字号,必须是特别小的字号,就比如说某些网站设计的噱头–“买房送老婆”,但其实你不知道的是,在“老婆”两个字之后,还有一个小到你需要用放大镜去看的“饼”字,就问你惊不惊喜,意不意外?

问题描述

谷歌浏览器,以及最近将取代IE的Edge浏览器,显示小于12px字号的解决办法

了解一点开发的人都知道,谷歌浏览器显示的最小字号就是12px,即使你设定的字体为10px,默认显示的也是12px,当然除了谷歌之外,新出的Edge浏览器也有同样的问题,主要原因还是因为内核使用的是同一个,常用的浏览器除了这两个之外,其实IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的。下图是我自己做的一个实验,结果如图所示:

试想若是全篇文字8px大小,阅读的时候得有多费眼睛,估计大多数人看到这么小的字体之后,都会自觉放大页面也去看吧?其实最小字号12px只是谷歌浏览器的一个默认的基础值设定,只是为了不影响正常阅读而已,既然是设定值,那理所当然是可以更改的。

解决方案一:

更改谷歌浏览器的基础设定12px值,用来解决开发人员的调试问题

步骤:

点开浏览器右上角的三个点,点击“设置”选择“外观”,找到“自定义字体”,在自定义字体中找到“最小字号”,将最小字号的进度条直接拉到最左边,这就表示最小字号是多少由你说了算。如果你找不到自定义字体这个选项,你也可以直接在设置页面最上面的搜索框里,直接输入字号,回车,页面会自动筛选出相应设置项,然后一样修改就可以了。在这个页面你可以看到,不仅可以修改默认的最小字号,还可以修改默认显示的字号、字体样式等老版本的可能是在“显示高级设置…”里,如果根据我的提示,你还是找不到,那我还是建议你更新浏览器版本吧。 在这之前有人说使用-webkit-text-size-adjust: none;解除字号限制,不过不知道为啥,我看着页面并没有效果,可能是现在已经废除了这种写法。 第一种解决方法是让开发人员用来调试代码,这样可以更直观的观察,其他浏览器小于12px字号的显示大小效果,因为除了谷歌、edge之外,常用的浏览器字号是能正常显示的。 但是这种方法并没有解决谷歌浏览器在普通用户页面的显示效果,接下来,我们使用第二种办法。解决方案二:设置浏览器显示小于12px以下字体的三种方法(设置浏览器显示网络异常)

使用缩放transform:scale(),使用较为广泛

优点:单行、多行文本都可使用 缺点:只是视觉效果变小,并不会改变盒子的实际占位,在对齐其他盒子时不太友好

步骤:

<div>文本</div> 文本嵌套块标签,这是因为缩放只对有宽高的标签有效,缩放的时候也是将标签一起缩放,而不仅仅是缩放文本,所以如果使用span等行内标签时,还需要将行内标签进行元素转换为块元素(display:block;)font-size:12px; 给文本设置字体12px,并设置缩放值为10/12=0.83333,也就是transform:scale(0.83);如果要设置8px,那就是8/12=0.66666transform-origin:0 0; 默认缩放中心点是在盒子的正中心,所以如果我们需要文本左对齐,就需要改变中心点,也就是transform-origin:0 0;该值有两个参数值,第一个是水平方位值,第二个是垂直方位值,对应的如果需要右对齐、或者是有缩进,那就改变对应的参数值即可。white-space: nowrap; 文本进行缩放后,并不会改变其原来盒子的大小,只是视觉上改变了大小,也就是说如果文本有换行的时候,它进行缩放后仍然是折行显示,这显然不符合我们要求,所以我们还需要强制文本在一行显示,也就是 white-space: nowrap;<!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>Document</title> <style> div { width: 300px; height: 30px; margin-bottom: 5px; background: rgb(206, 151, 151); } .box1 { font-size: 12px; } .box2 { font-size: 10px; transform: scale(0.83333); transform-origin: 0 0; white-space: nowrap; } </style></head><body> <div class="box1">我是正常的12px的文字大小 Hello world!</div> <div class="box1">我是正常的12px的文字大小 Hello world!</div> <div class="box2">我是正常的10px的文字大小 Hello world!</div> <div class="box2">我是正常的10px的文字大小 Hello world!</div></body></html>

解决方案三:

使用SVG 矢量图设置text 优点: 1px-12px任意字号均可设置,可对设计界面进行对齐调整 缺点:不支持多行文本

步骤:

在svg包含text标签,给svg设置宽高,文本内容写在text标签中; 因为svg是矢量图的概念,也就是说svg其实是一个图片,给图片内容进行缩放。实际的文本字号大小由text标签设置生效,但内容显示多少要看svg设置的宽高是多少,超出区域外的内容不会显示。

text标签的x y值这里必须用到的; text的x和y值默认为0,x值表示文字左下角开始的x坐标;y值表示文字左下角开始的y坐标,一般文本显示都是左对齐,所以x值为0,y值为字号大小。当然,如果是右对齐或者居中对齐的x y的值则需要另外设置对应的值。注意:x y的值是写在标签后面,并且无单位!

text文本设置样式的方法和普通标签设置的方法不一样,例如文本颜色填充是用fill设置,并不是color;如果需要文本缩进,或者是距离顶部有多宽的间隙,需要使用dx和dy; dx:文本在水平方向上移动的像素大小 dy:文本在垂直方向上移动的像素大小

该方法是可以设置任意字号大小,还能根据设计图的需要进行对齐调整,但svg没有换行符!!!所以文本并不支持换行显示,即使你设置的svg的宽高足够大,即使设置文本可以换行white-space: pre;也没有任何效果。 也就是说,svg默认所有单个或连续多个空格、换行符等转为一个空格来显示。

<!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>Document</title> <style> div{font-size: 12px;} svg{width: 100px;height: 100px;background-color: chocolate;} svg text {font-size: 8px;} </style></head><body> <div>我是最小12px字体大小 hello world!</div> <svg> <!-- svg是矢量图的概念方法,这里的文本并不支持换行显示,即使你设置的svg的宽高足够大 --> <!-- text文本设置样式的方法和普通标签设置的方法不一样,例如文本颜色填充是用fill设置,并不是color --> <text x="0" y="8" >我是10px字体大小 hello world!</text>> </svg></body></html>

本文链接地址:https://www.jiuchutong.com/zhishi/283871.html 转载请保留说明!

上一篇:vue 如何让PC端不同屏幕大小分辨率自适应(屏幕自适应)(postcss-px2rem、px2rem-loader、lib-flexible)(vue适配pc)

下一篇:Kamikōchi, Nagano Prefecture, Japan (© sadao/Shutterstock)

  • 华为手机重启怎么操作(华为手机重启怎么办)

    华为手机重启怎么操作(华为手机重启怎么办)

  • 移动掌上营业厅怎么退订套餐(移动掌上营业厅怎么查询通话记录查询)

    移动掌上营业厅怎么退订套餐(移动掌上营业厅怎么查询通话记录查询)

  • 手机文档怎么插照片(手机怎么建文档)

    手机文档怎么插照片(手机怎么建文档)

  • wxid后面一横怎么打(wxid_后面一堆字母数字)

    wxid后面一横怎么打(wxid_后面一堆字母数字)

  • b站粉丝牌子怎么升级快(b站粉丝牌怎么来)

    b站粉丝牌子怎么升级快(b站粉丝牌怎么来)

  • 电脑按电源键后亮一下就结束了(电脑按电源键后显示器不亮)

    电脑按电源键后亮一下就结束了(电脑按电源键后显示器不亮)

  • 微信朋友圈只对一个人可见怎么设置(微信朋友圈只对一个人可见对方知道吗)

    微信朋友圈只对一个人可见怎么设置(微信朋友圈只对一个人可见对方知道吗)

  • 苹果8p怎么固定亮度(苹果8plus怎么固定屏幕不旋转)

    苹果8p怎么固定亮度(苹果8plus怎么固定屏幕不旋转)

  • 苹果辅助触控自动消失什么原因(苹果辅助触控自动关闭怎样解决)

    苹果辅助触控自动消失什么原因(苹果辅助触控自动关闭怎样解决)

  • 华为手机的深色模式在哪里(华为手机的深色模式)

    华为手机的深色模式在哪里(华为手机的深色模式)

  • 无线路由器los亮红灯什么意思(路由器los灯一直亮是什么意思)

    无线路由器los亮红灯什么意思(路由器los灯一直亮是什么意思)

  • 网线有千兆百兆之分吗(网线 千兆 百兆)

    网线有千兆百兆之分吗(网线 千兆 百兆)

  • 苹果手机怎么下载抖音极速版(苹果手机怎么下一行打字)

    苹果手机怎么下载抖音极速版(苹果手机怎么下一行打字)

  • i39100f和i39100有啥区别(i3 9100参数和i39100f)

    i39100f和i39100有啥区别(i3 9100参数和i39100f)

  • 磁盘和光盘等媒体属于什么媒体(磁盘与光盘的存储原理)

    磁盘和光盘等媒体属于什么媒体(磁盘与光盘的存储原理)

  • 微信语音关闭麦克风会提示对方吗(微信语音关闭麦克风看视频对方听得到吗)

    微信语音关闭麦克风会提示对方吗(微信语音关闭麦克风看视频对方听得到吗)

  • ipadwifi支持热点吗(ipad wifi能用热点吗)

    ipadwifi支持热点吗(ipad wifi能用热点吗)

  • 戴尔笔记本怎么设置指纹解锁(戴尔笔记本怎么强制重启)

    戴尔笔记本怎么设置指纹解锁(戴尔笔记本怎么强制重启)

  • 哔哩哔哩视频保存到相册(哔哩哔哩视频保存到手机)

    哔哩哔哩视频保存到相册(哔哩哔哩视频保存到手机)

  • ios13电池百分比怎么设置(ios13电池百分比打开方法)

    ios13电池百分比怎么设置(ios13电池百分比打开方法)

  • 滴滴对公和不对公区别(滴滴对公和不对公派单区别)

    滴滴对公和不对公区别(滴滴对公和不对公派单区别)

  • exe文件为什么危险(文件出现exe打不开怎么办)

    exe文件为什么危险(文件出现exe打不开怎么办)

  • 退款成功没有收到退款(退款成功没有收到钱怎么办)

    退款成功没有收到退款(退款成功没有收到钱怎么办)

  • ps怎么画空心圆环(ps怎么画空心圆环相套)

    ps怎么画空心圆环(ps怎么画空心圆环相套)

  • MAC中通过Xcode启用高清视网膜屏幕显示效果的具体步骤(mac的xcode使用教程)

    MAC中通过Xcode启用高清视网膜屏幕显示效果的具体步骤(mac的xcode使用教程)

  • Nginx环境搭建及前端部署教程(Windows版)(nginx怎么搭建)

    Nginx环境搭建及前端部署教程(Windows版)(nginx怎么搭建)

  • 【创建FTP】如何在内网创建属于自己的FTP(创建ftp软件)

    【创建FTP】如何在内网创建属于自己的FTP(创建ftp软件)

  • Pycharm在指定目录下生成文件和删除文件(pycharm cant find main)

    Pycharm在指定目录下生成文件和删除文件(pycharm cant find main)

  • 工程类预交税金
  • 个人勾机给公司开票怎么开
  • 发票上的不含税单价怎么算的
  • 发票验旧是验旧已开发票还是未开发票
  • 个税是否可以跨区缴纳
  • 农产品收购发票可以跨区域开吗
  • 什么情况下要安起搏器
  • 货物所有权转移制度研究
  • 预缴税款的完税证明单
  • 专利技术转让使用费如何做会计处理?
  • 固定资产已入账怎么冲销
  • 国外汇款 用什么理由
  • 企业所得税减免优惠政策
  • 勾选发票必须当月认证吗
  • 计算广告的基本运作模式
  • 无形资产软件摊销年限的最新规定2021
  • 资产类科目余额在借方表示什么
  • 其他有形动产租赁服务
  • 超出经营范围开发票
  • 基建项目类型填什么
  • linux安装c语言环境
  • word2013压缩图片
  • PHP:zip_entry_name()的用法_Zip函数
  • 提前支付的费用记账
  • easyposer怎么导出
  • vue全家桶学多久能上手项目
  • mac apache php
  • 增值税一般纳税人是什么意思
  • 汇算清缴退税的账务处理
  • python索引值-1和位置-1
  • 企业所得税成本核定
  • 企业之间借款有利息要开票吗
  • sqlserver怎么显示结果窗口
  • 帐务处理程序
  • 未开票收入如何计提增值税
  • 进项税和销项税月末怎么结转
  • 收到投资款如何声明
  • 研发费用加计扣除是什么意思啊
  • 股东入股怎么做分录
  • 计提福利费是什么意思
  • 加权平均净资产收益率公式
  • 融资租赁首付款的性质
  • 企业代扣税费会计分录
  • 机床上的配件计入什么费用
  • 商业汇票到期无法兑现
  • 管理费用通俗理解
  • 企业多结转的成本跨年怎么冲回?
  • 融资租赁固定资产不属于筹资活动
  • 房地产企业成本控制存在的问题及对策
  • 全面解析皮炎
  • mysql如何修改默认值
  • 搜狗拼音输入法xp系统
  • xp如何把ie浏览器设置为默认浏览器
  • win2000注册表
  • centos6.5mini安装教程
  • ubuntu 11
  • win10预览版和正式版
  • win10预览版好吗
  • win10如何禁用windows defender
  • win7系统怎么打日语
  • 在linux系统中,用来存在系统所需
  • win10标准用户权限
  • unity de
  • opengl导入obj
  • jQuery的ajax中使用FormData实现页面无刷新上传功能
  • 欢迎使用来电提醒业务是什么意思
  • 如何修改apache端口号
  • shell字符串操作命令
  • css浮动和清除浮动
  • 从零开始学什么好
  • python内置函数format
  • 税务局的章
  • 广东高速费用支付宝支付如何开发票
  • 企业清算所得税申报表填写范本
  • 江苏电子税务局app下载
  • 重庆地方税务局发票查询
  • 简述进料加工对中国的意义
  • 汽车排量与购置税的关系
  • 消费税申报详细操作流程
  • 实木地板什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设