安卓机 H5 页面加粗样式没有效果

最新推荐文章于 2024-03-27 14:06:39 发布
最新推荐文章于 2024-03-27 14:06:39 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： css html 综合 文章标签： css 安卓 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang450712123/article/details/112750387
版权
css 同时被 3 个专栏收录
39 篇文章 1 订阅
订阅专栏
综合
32 篇文章 0 订阅
订阅专栏
html
23 篇文章 0 订阅
订阅专栏

安卓机 H5 页面加粗样式没有效果

问题描述

部分安卓机 h5 页面 css 设置加粗没有效果；

解决方案

这种情况的原因是部分安卓机对 font-weigth 的兼容问题；font-weight 需要设置 700 以上，才会起作用；不要用 数字 500 和600；bold 默认 700；

FE-阿阳
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 系统字体无效,android内嵌H5页面，字体设置失效的问题
weixin_39861255的博客
05-25 986
首先说明一下问题存在的情况：androidApp上内嵌了一个前端的h5系统公告页面，这个页面是更具一个模板H5页面生成的。具体如何生成的我不清楚(本人是前端)。然后生成过后，我直接本地打开页面如下：字体大小很正常，符合预期，然后在app上打开效果如下：如上图对比。我试了各种方法，都无法解决这个字体变小的问题…另外，貌似在ios上面又特么是正常的。我在模板也面上也加了一些比较常见的适配的东西(主要就...
仿安卓手机天气预报H5页面
最新发布
04-22
仿安卓手机天气预报，主要功能：天气实况、天气预警、24小时天气、7天天气、空气实况、天气指数、日出日落。
移动端字体加粗的解决方案
qq_44766377的博客
11-08 959
移动端字体加粗的解决方案 在移动端无法加粗字体应该是前端和设计的一个经常发生争执的点，在这里列举两种本人的解决方案 一、更换字体 这个方案应该是现在比较多的方案，直接使用较粗的字体，自然可以实现加粗，不过这个方法会增加项目重量，一个字体一般都要几m，而且为了字体一致需要bold和light两种字体，一般都是要10+m,对web端特别的不友好，如果是webAPP到时不用考虑，因为只需要下载一次就可以了。 二、字体阴影 text-shadow可能大家很少用到，因为需求很少，而且让人感觉很模糊，所以用到的很少。
Android TextView 通过代码设置加粗和取消加粗 等效果无反应或者反应缓慢
a872822645的博客
09-20 4889
今天在做TextView 通过不同点击时间切换 加粗和常规时候。出现异常。。经常无反应的情况。 最后解决办法是在原有代码设置基础上 增加了一句刷新语句。 TextView.postInvalidate();  就是设置完组件属性 刷新一下组件就好了
【前端问题集】安卓手机H5页面加粗失效
weixin_44609842的博客
12-27 1662
在 PC 中，字体很多，如果设置 font-weight 是 500 600 可以正确显示。但是在移动端下，字体有限，所以设置 500 和 600 是无效的。根据图中缺失填充的方法，如果缺少 500 ，那么会向下取值400。这就是移动端上，设置 font-weight: 400 和 font-weight: 500 粗细相同的原因。首先，font-weight 取值范围是 100-900 ，默认的是 400。700 对应 bold(加粗)400 对应 normal。
Android webview加载H5页面时css样式丢失
闰土CMS
09-06 5999
文章目录 混合开发，原生应用内通过Webview组件嵌入H5是非常普遍的，最近两年也一直在使用中。 但是最近团队成员写完项目以后，发生了一种情况：70%以上的概率，会发生加载的H5详情页CSS样式丢失的情况，页面js也能请求到数据，但是由于没有CSS样式，所以所有的数据都堆积到了页面左上角。 通过观察发现： 能正常加载出来的页面，一般需要耗时1-2秒，中间有明显的webview读条 css样式丢...
【微信_小程序】4.小程序Android web-view内嵌网页字体加粗不显示的问题
返璞归真
07-16 2538
最近做项目遇到一个问题，公司的小程序内部要嵌入H5页面，结果这个字体加粗在网页里面显示是正常的，在ios里面显示也是正常的，就是在Android上显示是不正常的，字体显示不加粗，网上搜了一圈，找到了答案。 （1）字体加粗属性 <style type="text/css"> .类名{ font-weight: 700;//加粗 font-w...
css解决打印不加粗BUG
SA
06-15 1204
chrome打印宋体，不会有加粗效果，解决办法为通过css阴影实现类似效果
TextView java 代码字体加粗
异次元－小飞哥 的专栏
11-02 2879
今天遇到这个问题，及时记录下来。 配置文件中加粗 <TextView android:id="@+id/tv_followup_day_unit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id
安卓端H5页面的emoji表情显示处理
10-12
在安卓端开发H5页面时，常常会遇到用户在输入框中使用手机自带的emoji表情符号。这些表情字符在不同的设备、浏览器上可能显示不一致，甚至无法正确显示，因此需要进行特殊处理。本文将详细讲解如何处理Android平台上...
手机h5页面长按复制完整代码
04-28
当用户希望从H5页面中复制文本时，尤其是代码片段，原生的长按操作可能无法满足需求，因为它通常只提供选择、剪切和粘贴等基本功能。为了在移动端实现更友好的长按复制体验，我们需要编写特定的JavaScript代码来处理...
android调用H5显示加载中效果的示例代码
08-29
在Android开发中，为了提高用户体验，通常需要在加载H5页面时显示加载中效果，以便让用户知道当前页面的加载状态。本篇文章将详细介绍如何在Android中调用H5显示加载中效果的示例代码，并对相关知识点进行详细解释。...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
在Android平台上，开发H5页面时常遇到一个问题：当用户点击位于页面底部或下方的输入框时，软键盘弹出会遮挡输入框，导致用户体验不佳。这个问题主要涉及到H5页面的布局、Android设备的交互特性以及浏览器的适配。...
font-weight失效移动安卓处理方法
MichaelAn的博客
02-26 1万+
font-weight失效移动安卓处理方法 1、BUG 现象 最近遇到一个奇怪的现象：一段文本设置了font-weight，但是在移动端中的浏览器中不显示加粗。 左侧是浏览器中移动端模拟器中的界面，可以看到对话框的标题和按钮文字是加粗的，右侧是真机开发中的对话框，标题和按钮文本是不加粗的。多次测试，中文不会加粗，英文正常。浏览器兼容性测试后也没问题，各种浏览器都是这样的。 很郁闷。 ...
font-weight元素失效
susanliy的博客
03-27 528
原因：由于在字上运用了字体，然后对于这个字体添加粗细失效了，字体包很大有10mb，使用导致了在刚刚进入页面的时候字体显示正常，等字体文件加载完成之后，font-weight元素失效。问题：在h5 的页面上无论设置font-weight多少的值都没有效果；手机上一开始文字有显示加粗的效果，可是等资源加载完成之后就会使字体粗细这个效果失效。解决方案：移除字体，直接在字上面添加font-weight元素。
font-weight在移动端不生效问题
baidu_36095053的博客
04-30 2945
font-weight属性可以加粗字体，可取值：数值、bold、bolder、lighter、normal。当font-weight取数值型的情况下，移动端可能显示不了粗体，部分手机渲染不了数值型的font-weight。示图： 所以在手机端使用加粗字体的话，还是用回bold等取值，尽量避免数值型 ...
【微信小程序】遇到CSS问题&坑
记录
05-16 977
至23.5.16。
解决font-weight：600在安卓机不生效的方法
lianwenxiu的博客
08-29 6723
按照UI设计图给的 font-weight:600 直接设置，发现苹果机是字体是加粗的，安卓机没有变化，改成 font-weight:bold 就好了
vsCode 开发微信小程序插件
热门推荐
FE-阿阳的博客
02-07 4万+
vsCode 开发微信小程序插件 问题描述 用微信开发者工具开发微信小程序不适应；没事，我们还有强大的 vsCode； 解决方案 用 vsCode 开发微信小程序可以配置以下插件，让开发更美好： 1. vscode weapp api 2. vscode wxml 3. vscode-wechat 4. Easy WXLESS 5. 有个和 vsCode 差不多，还可
安卓手机 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、付费专栏及课程。

余额充值