字体小于12px不生效的问题

最新推荐文章于 2024-03-14 22:18:18 发布

我系大壁虎

最新推荐文章于 2024-03-14 22:18:18 发布

阅读量873

点赞数 1

文章标签：前端 css3 html5

本文链接：https://blog.youkuaiyun.com/m0_61289694/article/details/124454965

版权

本文探讨了在静态样式设计中遇到的8px字体显示问题，分享了如何使用CSS transform的scale属性来调整字体大小，并提示了包裹文字以保持局部缩放的技巧。同时提到了调整位置和大小的重要性，以及相应的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在根据设计图做静态样式时发现需要用到字体为8px的，然后发现小于12px时字体大小不会生效

只需用到transform的scale属性就好

不过需要注意，如果我们只需要字体变小，就需要给文字再包一层，否则会整体缩小

位置和大小再去根据样式图调整

我调整后的代码：

HTML

CSS

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我系大壁虎

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【前端知识之CSS】怎么让Chrome支持小于12px的文字

weixin_44337386的博客

05-18

3803

本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么让Chrome支持小于12px的文字。

【Echarts】postcss-px-to-viewport include属性不生效问题

最新发布

前端相关

06-28

1097

postcss-px-to-viewport include不生效

参与评论您还未登录，请先登录后发表或查看评论

前端浏览器字体小于12px的解决办法

09-22

主要给大家介绍了关于前端浏览器字体小于12px的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue中字体设置小于12px

weixin_44224712的博客

05-31

1515

一般浏览器字体最小是12px，需求中却经常会出现小于12的情况，css样式可以直接用。比如缩小到原字体的80%，但是当用这种缩放方式后，会导致这个盒子也一起缩放。就会出现字体位置偏差的情况，解决办法是。将基点位置移动到未缩放之前的位置。

font-size 设置字体不生效解决方案（小于12px）

zhaojiaxing123的博客

11-25

2492

font-size 设置字体不生效解决方案（小于12px）

前端修炼手札：Chrome下CSS字体大小设置小于12px无效

iicecream的专栏

05-16

2578

在chrome浏览器中，可能是出于人性化浏览的考虑，如果字体大小小于12px,h

设置rem或font-size小于12px在浏览器中无效

qq_38134913的博客

12-17

2687

在开发移动端页面的时候把页面的font-size设置成了10px大小，但是在chrome中调试的时候却发现1rem=12px！一度让我怀疑人生。后面百度了发现原来不同的浏览器对于font-size的最小值是有限制的。比如在chrome中支持的最小值就是12px，在搜狗浏览器中最小值也是12px，可能因为他们用的内核都是一样的吧。所以当设置的font-size小于12px时，也会按照12px渲染。...

Chrome浏览器下CSS字体大小设置小于12px无效问题

06-08

Chrome浏览器在默认情况下将最小字体大小设置为12px，如果您的CSS设置的字体大小小于12px，那么浏览器会自动将字体大小设置为12px，从而导致您的CSS设置无效。要解决这个问题，您可以通过在CSS中添加以下代码来...

android 系统字体无效,android内嵌H5页面，字体设置失效的问题

weixin_39861255的博客

05-25

1147

首先说明一下问题存在的情况：androidApp上内嵌了一个前端的h5系统公告页面，这个页面是更具一个模板H5页面生成的。具体如何生成的我不清楚(本人是前端)。然后生成过后，我直接本地打开页面如下：字体大小很正常，符合预期，然后在app上打开效果如下：如上图对比。我试了各种方法，都无法解决这个字体变小的问题…另外，貌似在ios上面又特么是正常的。我在模板也面上也加了一些比较常见的适配的东西(主要就...

Chrome不能显示小于12px的字体的解决办法，同时解决-webkit-transform: scale不支持行内标签的问题

Rudon滨海渔村的博客

05-07

6455

解决方案让指定文字使用自定义的class，如forcefontsize10<a> Products <sup class="forcefontsize10"> 88 </sup> </a>并在css中自定义以下类：.forcefo...

换算rem的宽度和高度不生效 chrome字体最小为12px

setsunadoudou的博客

09-09

926

现在很多前端都用rem来单位元素和字体大小一般的设置是 html{ font-size:62.5%; } 换算来源 1rem = 16px 10/16 = 0.625 这样10px 就等于了1r...

修改 element-ui 组件 el-tabs 的选项卡字体大小样式无效的问题解决办法

热门推荐

luzhaopan的博客

08-22

6万+

1、问题如图所示： el-tabs 的选项卡字体默认大小为 14px ，想修改它的大小，一般的方法就是重写 el-tabs__item 该类的样式，在加个！important ，它的样式就会被重写 2、解决方法：但发现它的样式并没有覆盖，字体的样式还是原来的样式，百思不得其解，废了好多精力，终于找到了罪归祸首，那就是 scope，我在我的style标签里加入了这个标签属性，无论怎么...

设置字体大小为10px无效

萧然自我的博客

12-28

7381

因为浏览器的最小字体也许是12px，需要修改浏览器的最小字体

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

富朝阳的博客

03-14

2678

我们在项目开发过程中有时候会遇到设计师给的小于12px的字体，IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的，但是谷歌浏览器上显示字体最小为12px，css设置font-size：10px，运行代码显示结果仍然是12px大小，那么这个我们怎么去解决呢？

font-size：10px 不起效的解决方法。

weixin_43612234的博客

01-12

1万+

关于字体大小为12px以下没效的解决方案。有时候UI给我们图的时候，有一些样式是正常情况下是不起效的，例如，设置字体大小 font-size：8px，往往设置了这个属性是没有效的。这个时候可能你很烦躁。特别是项目在赶的时候。（我就是这样，明天要上线的那种。）其实可以这样设置：方案1：如果是手机端；设置了一rem为单位的。 <style> //根元素的设置。 html{ font-...

Ant Design 修改tab文本字体大小，tabBarStyle样式不生效

前端琅琊阁

04-23

2万+

1. 如果你进来这篇文章，想必也被这个问题折磨好几天了。现在我把我解决的思路记下来，也与你分享！一开始，我找到了一个属性tabBarStyle，死活不生效，甚至大刀阔斧升级版本到2.13.13（原来是2.5.3，不敢升到3.x,担心不兼容），也没有什么卵用。后来，实在没招，我想我换个组件吧，用了react-tabs ，算是基本解决问题了，但又碰到事件绑定不对的新问题。正当我愁眉不展时...

移动端显示不了小于12px字体的方案

qq_37332077的博客

06-13

954

部分浏览器显示不了小于12px字体的方案

浏览器最小显示12px字体的解决方法

❤❤❤

08-24

1396

浏览器上显示字体最小为12px，css设置font-size：10px，显示的时候还是12px大小可以利用css中的transform属性来缩小： transform:scale(0.8) 注意：transform只有块级元素有这属性，一开始我把这个属性设置在span上，怎么都不出效果，换div就有效果了例： font-size:12px; tran...

使用antd组件库，将基准调至 12px

赵乘风_i

04-23

1023

使用了 antd 新组件库，但是基准都是 14px，而系统的默认基准是 12px，通过一些全局配置，可以直接将基准调至 12px 参考 antd 主题配置最开始，采用的是 webpack的配置方式，也就是在webpack.config.js中，在 less-loader，设置紧凑主题（compact）但其实结果不太理想，在本地是可以正常调整到12px，但在发布dev之后，有的是12px，有的还是14px。这非常使人疑惑，最后大概认为是打包后资源请求先后的问题，但我也不能每个修改样式，然后加.