web端设置12以下的字体并生效

已于 2023-06-19 17:15:56 修改
阅读量507 收藏 1
点赞数
文章标签： css html css3
于 2023-06-19 17:11:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishuaishuai13/article/details/131291436
版权

web端默认最小字体为12，因项目需要设置字体为10像素，试了以下方法是好用的

第一种方式：

//这样出来的字体实际是10， font-size数值为 实际大小*2
font-size: 20px;
zoom: 50%;

出来的效果如图所示
在这里插入图片描述

font-size: 10px

直接设置10出来的效果
在这里插入图片描述

第二种方式：

font-size: 20px;
transform: scale(0.5);

出来效果，这样出来效果文字与其他内容边距较大，不美观，建议用第一种
在这里插入图片描述

两者出来效果不同的原因是：zoom的缩放会改变元素的真实空间大小，而scale的缩放占据的原始尺寸不变

lishuaishuai13
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端入门到实战：网页开发中字体，字号与尺寸对应表
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-01 1874
了解字体的一样常识，不管做一份文档编辑还是网页开发，都是很有必要的。整齐划一，井然有序才终是大家之道。 1.字体 在文档编辑中，我们常用的是宋体，小四号字，新罗马字体，字母和数字用的是Arial字体,段落首行缩进2个字体，采用多倍行距中的1.25倍行距。 在网页开发中，普遍偏爱微软雅黑与宋体，14/16px，非衬线体。 2.字号 印刷文字有大、小的不同变化，排版及图象处理软件中汉字字体大小的计量，...
前端浏览器字体小于12px的解决办法
09-22
主要给大家介绍了关于前端浏览器字体小于12px的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目前网页最小字体以及字体压缩
waillyer的博客
12-01 2792
由于第一代网页基本都是为800x600的15’CRT显示器开发的，所以大多数网页都是以9pt或12px为标准的网页字体大小。目前随着大尺寸和高分辨率显示器的普及，过小的网页字体已经让我在浏览网页时出离的郁闷了。 谷歌浏览器上显示字体最小为12px，css设置font-size：10px，显示的时候还是12px大小 可以利用css中的transform属性来缩小： transform:scale(0.5,1) 第一个参数是X轴比例，第二个参数是Y轴比例，第二个参数可省略，若缺省则等于第一个参数。 缩小方向：
如何浏览器显示12px以下的字体大小
m0_74208638的博客
07-20 386
只要在元素上加上属性即可，transform：scale（）可以缩放宽高，但行内块元素没有宽高，因此要加上display：inline-block属性。如果想要更小的字体，可以使用css3的缩放属性：transform：scale（），但其只是视觉效果变小，不会改变盒子实际占位。在浏览器中css字体设置在12px及以下时都会默认为12px。
修改浏览器的默认最小字号限制（以chrome为例）
tuzi007a的博客
09-08 3954
修改浏览器的默认最小字号限制小于最小字号的应用场景修改方法 小于最小字号的应用场景 web页面和手机页面用同一套代码开发时，在一个固定框内输入一行字，在web端浏览器下，可以正常正常显示： 但是在手机页面中，屏幕较小，固定框的宽度也会缩小，由于我们是在浏览器控制台中的手机模式中查看的，所以字号小到一定程度，就被浏览器限制了，不能再小了。在浏览器中查看，就会显示文字超出了框的大小。但是手机页面是没有最小字号限制的，在手机页面可能查看是正常的。所以容易对开发造成困扰： 这时候，就要取消浏览器的最小字号限制，
您觉得目前网页最小字体应该多大呢?
weixin_34292959的博客
09-27 589
    由于第一代网页基本都是为800x600的15'CRT显示器开发的，所以大多数网页都是以9pt或12px为标准的网页字体大小。目前随着大尺寸和高分辨率显示器的普及，过小的网页字体已经让我在浏览网页时出离的郁闷了。    另一个网页使用小字体的原因是，在互联网普及之初，英文网页占的比例比较大。由于英文字母相对汉字来说超简单，都没有笔画是否复杂一说，英文的小字体总是能显得很简洁、清晰，所以起初的...
设置系统字体
01-07
了解这些基本步骤后，我们还可以探讨字体的格式，如TrueType（.ttf）、OpenType（.otf）和Web字体（.woff、.woff2等）。此外，字体的版权问题也是需要注意的，使用未经授权的商业字体可能会引起法律纠纷。最后，优化...
Python matplotlib修改默认字体的操作
09-17
3. **保存并重启**：保存配置文件后，重启应用程序或内核以使更改生效。 **代码示例**： ```python import matplotlib as mpl # 设置默认字体为 SimHei mpl.rcParams['font.sans-serif'] = ['SimHei'] # 绘制...
<Vscode编辑器好看的字体文件>
最新发布
06-21
本文将详细介绍Vscode中常用的两款好看字体——FiraCode和Operator，并探讨如何在Vscode中设置这些字体。 首先，让我们了解这两款字体的特点： 1. **FiraCode**：FiraCode是一款专为程序员设计的等宽字体，它的...
更改zabbix 中文字体，解决中文显示乱码问题
05-28
在IT领域，尤其是在系统监控和管理工具中，Zabbix是一个广泛应用的开源解决方案。...通过调整这些设置并选择合适的中文字体，我们可以确保Zabbix在显示中文信息时的清晰和准确，提高中文用户的使用体验。
CSS3教程(7):CSS3嵌入字体
09-27
在设计过程中，开发者可能需要使用如Font Squirrel的“Web Font Generator”这样的工具，生成适合各种浏览器的字体包，以确保广泛的支持。 总结起来，CSS3的嵌入字体功能极大地扩展了网页设计的可能性，让设计师...
设置浏览器显示小于12px以下字体的三种方法
热门推荐
qq_43687594的博客
04-30 2万+
小于12px字号的三种解决办法
前端入门视频笔记 HTML5（一） P1-31
wsyyyyyyy的博客
08-27 346
03-网页相关概念 网站是网页集合； 网页通常是HTML格式的文件，以.htm或.html后缀结尾，要通过浏览器来阅读，由文字、图片、链接、声音、视频等元素构成。 HTML（HyperText Markup Language）超文本标记语言 用来描述网页的标记语言，是一套标记标签。 网页的形成：html描述 > 浏览器解析渲染> Web页面显示 04-常用浏览器 IE、火狐（Firefox）、谷歌（Chrome）、Safari（苹果）、Opera五大浏...
webview设置详解
m0_38028682的博客
03-20 1963
1、setSupportZoom(boolean support) 设置WebView是否支持使用屏幕控件或手势进行缩放，默认是true，支持缩放。 getSettings.setSupportZoom(false); 2、setMediaPlaybackRequiresUserGesture(boolean require) 设置WebView是否通过手势触发播放媒体，默认是true，需要手势触...
浏览器最小显示12px字体的解决方法
Geoff的博客
04-12 1万+
谷歌浏览器上显示字体最小为12px，css设置font-size：10px，显示的时候还是12px大小可以利用css中的transform属性来缩小：transform:scale(0.5,1)第一个参数是X轴比例，第二个参数是Y轴比例，第二个参数可省略，若缺省则等于第一个参数。缩小方向：默认是往中间缩小，可以添加 transform-origin:left ，往左侧缩注意：①transform只...
9.谷歌浏览器最小字体尺寸
qq_36367494的博客
02-05 1770
chrome有最小字体大小12px的限制，以前可以用-webkit-text-size-adjust：none来解决。但是chrome27以后就不支持了，而且很影响用户体验。我们可以巧用transform来显示小于12px的字体。代码如下： [css] view plain copy .font-6px{     transform: scal
浏览器最小字号
ISaiSai的专栏
08-27 3338
safari,iphone 已经支持1px pc chrome 12px 最小 android 1px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, u
针对谷歌默认最小字体12px的正确解决方案 （css、html）
qq_36278639的博客
10-27 1万+
今天晨会，产品要求把以前12px的字体改小一点，我心想这有什么难的，就随口答应了。哪知，改css的时候，谷歌浏览器中font-size小于12px时，字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是，只百度一伙了，结果还真让人大吃一惊：原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那
web前端字体居中_css如何让文字水平居中显示？
05-24
可以使用 CSS 的 `text-align` 属性来实现文字水平居中显示，例如： ```css div { text-align: center; } ``` 上述代码将使 `div` 元素中的文本内容水平居中显示。如果要让某个特定元素内的文本水平居中，也可以直接在该元素上使用 `text-align: center;`。 需要注意的是，这个属性只对块级元素（如 `div`）和一些内联块元素（如 `button`）有效，对于一般的内联元素（如 `span`）可能需要将其转换为内联块元素才能生效。可以使用 CSS 的 `display` 属性来实现： ```css span { display: inline-block; text-align: center; } ``` 上述代码将使 `span` 元素转换为内联块元素，从而使 `text-align` 属性生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值