【前端问题集】安卓手机H5页面加粗失效

最新推荐文章于 2023-07-18 20:08:31 发布
最新推荐文章于 2023-07-18 20:08:31 发布
阅读量1.6k 收藏
点赞数 3
分类专栏： 兼容 css 文章标签： html5 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44609842/article/details/128451966
版权

问题描述
安卓手机H5页面设置加粗没有效果

原因
首先，font-weight 取值范围是 100-900 ，默认的是 400
400 对应 normal
700 对应 bold(加粗)

image.png

在 PC 中，字体很多，如果设置 font-weight 是 500 600 可以正确显示。但是在移动端下，字体有限，所以设置 500 和 600 是无效的。根据图中缺失填充的方法，如果缺少 500 ，那么会向下取值400。这就是移动端上，设置 font-weight: 400 和 font-weight: 500 粗细相同的原因。

解决方案
加粗效果font-weight设置成700或者使用关键字bold即可

where are go
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决font-weight：600在安卓机不生效的方法
weixin_42125732的博客
01-13 1万+
1 解决font-weight：600在安卓机不生效的方法 按照UI设计图给的 font-weight:600 直接设置，发现苹果机是字体是加粗的，安卓机没有变化，改成 font-weight:bold 就好了
font-weight失效移动安卓处理方法及原因
yongyafang123的博客
02-03 1098
font-weight
H5 页面设置了字体的粗细样式，但是在华为手机里微信打开访问样式不生效？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-30 1249
字体样式设置了 ，但是效果出不来 产生这个问题的原因就是自己在华为手机里设置了字体：选择默认即可，然后去微信里面打开页面，为了让默认字体生效，我的操作是找到微信的关怀模式，先开启然后再关闭，再打开页面。最后样式就正常了：......
安卓机 H5 页面加粗样式没有效果
FE-阿阳的博客
01-17 2551
安卓机 H5 页面加粗样式没有效果 问题描述 部分安卓机 h5 页面 css 设置加粗没有效果； 解决方案 这种情况的原因是部分安卓机对 font-weigth 的兼容问题；font-weight 需要设置 700 以上，才会起作用；不要用 数字 500 和600；bold 默认 700； ...
解决移动端font-weight无效问题
nunumaymax的博客
01-06 2894
解决移动端font-weight无效问题前言代码 前言 近期项目有个页面的字体需要加粗显示，在谷歌浏览器和微信开发者工具上看都是正常的，但是在手机上无论怎么调整字体粗细都没有变化。造成这种现象的有很多种原因，可能是浏览器默认字体不同，导致表现的差异，需要统一字体；也可能是某些字体就是不支持改变粗细。下面提供一种解决办法，我们可以通过设置font-family（针对不同浏览器和运行环境进行全面配置 font-family 属性）来让字体正常显示加粗效果。 代码 p { font-size: 50px;
font-weight在移动端不生效问题
baidu_36095053的博客
04-30 2906
font-weight属性可以加粗字体，可取值：数值、bold、bolder、lighter、normal。当font-weight取数值型的情况下，移动端可能显示不了粗体，部分手机渲染不了数值型的font-weight。示图： 所以在手机端使用加粗字体的话，还是用回bold等取值，尽量避免数值型 ...
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
解决Android软键盘弹出覆盖h5页面输入框问题 知识点一：Android软键盘弹出机理 Android软键盘弹出是Android系统中的一种输入方式，当用户触发输入框焦点时，软键盘会弹出以便用户输入内容。在h5页面中，软键盘弹出...
APP下载H5页面纯静态html前端模板_静态照片会动的软件
12-04
标题中的“APP下载H5页面纯静态html前端模板”指的是一个用于展示应用程序（APP）下载信息的网页模板，该模板完全基于HTML静态语言构建。在Web开发中，H5通常是指HTML5，这是一种最新的超文本标记语言标准，具有更...
手机H5页面静态模板.zip
11-03
30款网页模板，HTML+CSS+JS组成的静态网页，涵盖商城、博客、旅游、资讯、搜索和菜单类的页面，在网页中F12即可呈现手机和浏览器两种显示模式，拿来即用，直接二次开发（编辑图片和文字）。
H50_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
最新发布
08-01
"H50_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 这个标题明确指出，我们正在处理一个与HTML5相关的手机网站模板，它专为移动端设计，并且具备前端开发的源码。"H50"可能是指这个模板系列的一个...
移动端字体加粗的解决方案
qq_44766377的博客
11-08 940
移动端字体加粗的解决方案 在移动端无法加粗字体应该是前端和设计的一个经常发生争执的点，在这里列举两种本人的解决方案 一、更换字体 这个方案应该是现在比较多的方案，直接使用较粗的字体，自然可以实现加粗，不过这个方法会增加项目重量，一个字体一般都要几m，而且为了字体一致需要bold和light两种字体，一般都是要10+m,对web端特别的不友好，如果是webAPP到时不用考虑，因为只需要下载一次就可以了。 二、字体阴影 text-shadow可能大家很少用到，因为需求很少，而且让人感觉很模糊，所以用到的很少。
font-weight失效移动安卓处理方法
MichaelAn的博客
02-26 1万+
font-weight失效移动安卓处理方法 1、BUG 现象 最近遇到一个奇怪的现象：一段文本设置了font-weight，但是在移动端中的浏览器中不显示加粗。 左侧是浏览器中移动端模拟器中的界面，可以看到对话框的标题和按钮文字是加粗的，右侧是真机开发中的对话框，标题和按钮文本是不加粗的。多次测试，中文不会加粗，英文正常。浏览器兼容性测试后也没问题，各种浏览器都是这样的。 很郁闷。 ...
解决Android，ios字体设置font-weight后粗细显示效果不一问题
陈景夏
09-06 7467
作者：张国钰 链接：https://www.zhihu.com/question/263533998/answer/270170059 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 font-weight的实际效果取决于浏览器的处理以及字体自身对粗体细体的支持，按照标准，如果设置的是数字，比如100，200，那么其实100-400都是normal，500~700都是bold，建议直接用lighter，normal，bold，bolder来设置font-weight。前面说
Android Html.fromHtml支持字体大小和加粗(可扩展)
forwardyzk的专栏
09-17 2万+
先看效果图 开发的时候,需要使用到富文本,如果用到了Html标签,系统不支持字体大小和加粗样式,那么就需要自己解析写. 使用例子 String htmlStr2 = "<span style='color:#EE30A7;font-size:20px'>Html" + "<font color='...
html table font-weight,font-weight
weixin_39531374的博客
06-17 692
字体粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。中文名字体粗细外文名font-weightfont-weight简介编辑语音本节主要讨论的就是在如此纷繁的字体粗细标准中，总结出一套可行的规律。：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | ...
uni-app中button按钮font-weight不生效
yangyanqin2545的博客
07-18 359
参考：https://blog.csdn.net/m0_49609366/article/details/119820558。当给button组件设置font-weight为600的时候，发现并不会起作用，此时需要将数值修改为700，即可看到效果。
UI写的font-weight对应的数值
weixin_45663702的博客
05-17 4062
在实际工作中，我们前端一般根据UI设计图来还原页面效果，而UI通常会在字重（font-weight）写上Regular、Normal、Medium、Light。。。我们肯定是需要将它转换为对应的数值。
Andoid TextView显示富文本html内容及问题处理
主要记录一些问题处理记录，部分是作为知识库使用
10-14 2万+
html
解决 font-weight 无效的问题
热门推荐
weixin_33774615的博客
12-13 2万+
近期调页面时有几个 font-weight 需要修改，无论怎么调整字体粗细都没有变化，深入研究后总结下文 初探 本地写个例子，代码如下 <p class="thin">This is a paragraph</p> <p class="normal">This is a paragraph</p...
安卓手机 h5页面拨打电话后页面不能滚动了
06-02
这个问题可能是由于拨打电话后，系统弹出的拨号界面覆盖在当前的 H5 页面上，导致页面无法滑动。解决方法如下： 1. 将拨打电话的代码改为使用 WebView 的 loadUrl 方法打开一个新的链接，这样就可以在新的页面中拨打电话，不会影响当前 H5 页面的滑动。 2. 可以在 H5 页面中监听 window.onblur 和 window.onfocus 事件，在页面失去焦点时（即跳转到拨号界面时），禁止页面滑动，页面重新获取焦点后（即从拨号界面返回时），恢复页面滑动。 示例代码： ``` // 禁止页面滑动 window.onblur = function() { document.body.style.overflow = 'hidden'; } // 恢复页面滑动 window.onfocus = function() { document.body.style.overflow = 'auto'; } ``` 3. 在 H5 页面中使用 CSS 的 fixed 定位，将需要滑动的内容包裹在一个 div 中，设置 div 的高度为 100% 和 overflow-y: scroll，这样在拨号界面弹出时，页面的 fixed 元素不会受影响，滑动的内容也不会被覆盖。 示例代码： ``` <style> .wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; } </style> <div class="wrapper"> <!-- 需要滑动的内容 --> </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值