font-weight元素失效

最新推荐文章于 2025-03-27 11:02:56 发布
最新推荐文章于 2025-03-27 11:02:56 发布
阅读量1.3k 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/susanliy/article/details/137075769
版权
文章讨论了在H5页面上设置font-weight无效的问题，原因是使用了大体积字体包导致加载延迟，解决方法是移除字体并直接应用粗细样式。

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

问题：在h5 的页面上无论设置font-weight多少的值都没有效果；手机上一开始文字有显示加粗的效果，可是等资源加载完成之后就会使字体粗细这个效果失效

原因：由于在字上运用了字体，然后对于这个字体添加粗细失效了，字体包很大有10mb，使用导致了在刚刚进入页面的时候字体显示正常，等字体文件加载完成之后，font-weight元素失效。

解决方案：移除字体，直接在字上面添加font-weight元素

蜡笔小嘟
关注
解决 font-weight 无效的问题
weixin_33774615的博客
12-13 3万+
近期调页面时有几个 font-weight 需要修改，无论怎么调整字体粗细都没有变化，深入研究后总结下文 初探 本地写个例子，代码如下 <p class="thin">This is a paragraph</p> <p class="normal">This is a paragraph</p...
font和line-height之CSS代码书写顺序不同，导致显示效果不一样
10-30
但是，如果先声明`line-height`，然后再声明`font`，那么`line-height`的值可能会被`font`中的`font-size`覆盖，导致行间距的设置失效。 在提供的示例中，我们看到两种不同的CSS声明： 1. 先声明`line-height`，后...
font-weight设置了为什么没生效
qq_32102987的博客
12-05 3603
通常情况下，一个特定的字体仅会包含少数的可用字重。若所指定的字重不存在直接匹配，则会通过字体匹配算法规则匹配使用邻近的可用字重。这也就是为什么我们有时候使用特定字重时没有“生效”，看起来跟其它字重差不多的原因所在
解决·CSS·font-weight给数字值没有反应
最新发布
m0_73001740的博客
03-27 499
CSS·font-weight给数字值没有反应
fontweight 失效的原因
KLW75
05-18 2239
font-weight属性用于设置或者检索对象中文本字体的粗细，由用户端系统安装的特特的特定字体变量映射决定，系统选择最近的匹配， 这样就会有，用户可能看不到不通知之间的差异。
windows 和 max 设置字体font-weight显示无效果
m0_52113402的博客
06-12 624
后面了解到，font-weight的数值1-900，windows都是支持的，但是，使用的字体可能是不支持所有数值的。
font-weight失效移动安卓处理方法
热门推荐
MichaelAn的博客
02-26 1万+
font-weight失效移动安卓处理方法 1、BUG 现象 最近遇到一个奇怪的现象：一段文本设置了font-weight，但是在移动端中的浏览器中不显示加粗。 左侧是浏览器中移动端模拟器中的界面，可以看到对话框的标题和按钮文字是加粗的，右侧是真机开发中的对话框，标题和按钮文本是不加粗的。多次测试，中文不会加粗，英文正常。浏览器兼容性测试后也没问题，各种浏览器都是这样的。 很郁闷。 ...
font-weight:600；不生效以及单行多行文本省略，iphoneX 适配等常见CSS问题收集解决
yanhua1575的博客
10-21 3633
1.user agent stylesheet b标签没写加粗却加粗了，浏览器调试发现是b标签多了一个样式控制的，如下图 user agent stylesheet是浏览器默认样式表，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染，不同浏览器甚至同一浏览器不同版本的默认样式是不同的。 解决方案： 由于user agent stylesheet的优先级很低，自己写样式覆盖即可。 2.android机型font-weight:600；不生效 android机型无法识别400，500，600这些字重
CSS font-weight：700 失效问题
07-08
关于CSS的font-weight属性失效问题，可能有几个原因导致： 1. 字体不支持所选的粗细：某些字体可能只提供了常规（normal）和粗体（bold）两种粗细选项，不支持其他数值。如果你选择了不支持的数值，那么样式将无效...
font-weight不生效
12-31
### 解决 `font-weight` ...通过上述方法应该可以帮助解决大多数情况下遇到的 `font-weight` 失效问题。当然也存在其他潜在因素影响最终视觉效果，比如父级元素继承下来的样式覆盖子项设置等复杂情况下的层叠计算逻辑。
font-weight其他值不生效
01-24
### CSS `font-weight` 属性某些值不生效的原因及解决方案 #### 浏览器默认样式影响 浏览器自带的用户代理样式...通过上述方法可以有效处理大部分关于`font-weight`属性失效的现象，并且保持良好的跨平台一致性体验。
IE中css样式设置height无效的解决方法
12-11
请看代码： 复制代码代码如下: <div xss=removed></div> 显示的结果应该是个小点，但是在ie下就是显示一个竖长条，就是说height无效，这就是IE一bug 解决办法，添加overflow:hidden; 复制代码代码如下: <div xss=removed></div> 解决问题。
css解决font-weight:blod跳动问题的解决
12-14
需求：实现鼠标悬停在链接上时，链接字体加粗的功能。 实现方式1： a:hover{font-weight:blod} 结果鼠标悬停的时候，页面会有跳动的现象。因为改变字体的时候改变了元素的大小，所以引起了页面的重排，所以会有跳动的现象。 实现方式2： a:hover{text-shadow: 1px 0 0 currentColor;} 效果对比：
h1,h2,img{text-align: center;} .c{color: chartreuse;} .d{font-weight: bold;} </style> </head> <body> <h1>春</h1> <h2>朱自清</h2> <div text-align: center;></div> <img src="u=1620380877,955579928&fm=253&fmt=auto&app=138&f=JPEG.webp" width="200" height="300"/>为什么图片居中不了
03-26
此外，引用[5]提到，如果错误地使用了display属性，比如将父元素的display设置为block以外的值，或者图片本身被设置为块级元素（比如display: block），这时候text-align可能失效，因为text-align只影响行内内容。...
uniapp font-weight: bold不生效
ScottePerk的博客
07-06 1716
font-weight只支持normal bold这样的值，是不支持数字的，写数字实际上在范围内都是会自动转化成normal bold这些值的，没有中间大小。这个确实就是这样的。解决办法就是写在style里面就可以了，小程序就是这样的，别的平台就不知道了。这可能是小程序的渲染模型导致的。
font-weight在移动端不生效问题
baidu_36095053的博客
04-30 3502
font-weight属性可以加粗字体，可取值：数值、bold、bolder、lighter、normal。当font-weight取数值型的情况下，移动端可能显示不了粗体，部分手机渲染不了数值型的font-weight。示图： 所以在手机端使用加粗字体的话，还是用回bold等取值，尽量避免数值型 ...
解决移动端font-weight无效问题
nunumaymax的博客
01-06 3537
解决移动端font-weight无效问题前言代码 前言 近期项目有个页面的字体需要加粗显示，在谷歌浏览器和微信开发者工具上看都是正常的，但是在手机上无论怎么调整字体粗细都没有变化。造成这种现象的有很多种原因，可能是浏览器默认字体不同，导致表现的差异，需要统一字体；也可能是某些字体就是不支持改变粗细。下面提供一种解决办法，我们可以通过设置font-family（针对不同浏览器和运行环境进行全面配置 font-family 属性）来让字体正常显示加粗效果。 代码 p { font-size: 50px;
font属性简写失效的原因font-weight和font-size
RebootTang的博客
06-12 5758
在设置字体样式本来是用各自单个属性设置的，嫌麻烦，不想在每个选择器里都用两行来设置字体的weight 和size，所以换成font的简写，一开始写成下面这样，但是发现不生效, * { font-family: "Microsoft YaHei UI Light", sans-serif; } .selector1 { font-size: 2.5rem; fon...
font-weight在google了浏览器生效，在其它浏览器上不生效
Wcharles666的博客
08-09 3462
问题分析 主要是因为在font-weight属性时，我们使用了数值，例如font-weight:0，600,1000等等，而不同浏览器对此表现并不一致 解决方法 最简单的使用方法，使用font-weight的自带值：normal bold，即可很好的解决我们遇到的问题，name花里胡哨，不实用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值