浏览器加粗字体显示异常

最新推荐文章于 2024-07-17 19:07:26 发布
最新推荐文章于 2024-07-17 19:07:26 发布
阅读量701 收藏 10
点赞数 9
分类专栏： else 文章标签： javascript chrome css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Raccon_/article/details/135201031
版权

浏览器加粗的字体模糊虚化


如果在css中设置了普通的字体样式 @font-face，使用了 font-weight: bold 的字体会在浏览器页面中会显示模糊虚化的现象，而正常的字体没有这种情况，显示的情况根据不同的浏览器会有区别。

* 出现轻微模糊虚化效果，在背景颜色下效果更明显 ⬇
在这里插入图片描述
这是由于设置普通的字体样式时需要同时设置粗体和细体的字体样式，如果没有浏览器会使用算法进行合成对应的字体，结果就会不相同。

因此需要在设置使用 font-weight: bolder 和 font-weight: lighter 等其他改变粗细的样式中指定对应的粗体或细体的@font-face。

* 设置@font-face后的粗体无明显虚化 ⬇
在这里插入图片描述

Raccom
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
零散专题32 生成PDF
多啦的博客
06-13 621
生成pdf的方案 （1）JSPDF(前端生成 ) 优点：不需要服务端安装无头浏览器，使用CSS方便控制样式，生成的PDF文字可复制 缺点：对中文支持不好 （2）PDFKit( 服务端生成) 优点：服务端直接解决，生成的PDF文字可复制，通过引入字体，可支持中文 缺点：样式控制复杂 （3）node-html-pdf(服务端生成) 优点：服务端通过控制HTML模板生成PDF，支持中文，样式控...
Android 字体没效果,android – 为webview设置自定义字体时,字体样式不起作用
weixin_33000813的博客
05-25 1233
Main.java：Main instanceMain = this;String Dataz = FN.getHtmlData(instanceMain,"BMitra",20,(getResources().getString(R.string.matn2)));btne.loadDataWithBaseURL("file:///android_asset/", Dataz, "text/ht...
记录使用puppeteer打开无头浏览器生成PDF中文不显示问题
qq_32193373的博客
03-25 277
1.安装字体文件，把win系统的字体文件上传到服务器上。然后在js文件中使用添加字体文件 添加。使用命令 fc-list查看字体文件。比如我上传的事simsun.ttc。系统是centos,
CSS 单位与属性
李浩然的专栏
06-01 1734
一：单位   px,em ,%（相对单位）   font-size:25不加单位的数字毫无意思   px像素，相对单位。和屏幕的分辨率有关。   em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)   %,百分比。相对单位。相对于当前默认值的百分比。   浏览器的默认字体大小为16px. 二：文字属性  font可以同时设置字符的各种属性，包括font-style
使用docker部署chrome无头浏览器并解决中文乱码，为pyppeteer提供运行环境
蘑菇猎手的专栏
04-27 6206
项目 $ ls -1 demo.py requirements.txt MSYHBD.TTC Dockfile Dockfile FROM python:3.8-slim RUN apt-get update && apt-get -y install libnss3 xvfb gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1
h5在ios端app中嵌套 字体异常放大
weixin_45730243的博客
09-13 300
【代码】h5在ios端app中嵌套 字体异常放大。
python加粗_python 加粗
weixin_34696080的博客
02-03 2168
Centos下安装Python3.5(本文章，凡是centos命令，我用斜杠加粗表示，以便各位阅读~)一般情况下，centos系统是自带python的，但是默认的python版本比较老，是2.6.6，于是就可以去官网下载最新的3.5,不要要注意的是，3.5是貌似不支持lxml模块，反正我在windows下找了很多lxml模块，e...文章科技小能手2017-11-121056浏览量Python学习...
win10 系统 chrome内核浏览器 微软雅黑字体难看的解决方法
热门推荐
FungLeo's Blog
10-14 1万+
升级到win10之后，我对win10的感觉还是很好的。但是，我总感觉win10的微软雅黑字体发生了改变，变得异常难看，尤其是在加粗的情况下。这让我很是不爽，但又没有任何办法。偶然情况下，我将网页切换到了IE核心，发现字体瞬间变得好看了。我顿时想到这不是win10的问题，而是chrome内核的问题。迅速百度，终于找到了解决方法。原来是打开了 DirectWrite 这个选项的问题。我用的是搜狗浏览器。
谷歌浏览器和火狐浏览器的12px字体显示大小不一样
weixin_44093954的博客
09-04 1079
这里写自定义目录标题功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 谷歌内核的浏览器默认最小字体12px的正确解决方案...
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
10-28
然而，在某些IE版本中，当使用fadeIn()方法时，可能会观察到英文字符在动画过程中异常加粗，这通常是由于浏览器渲染机制的bug或不兼容性导致的。 解决这个问题的一个有效策略是通过调整CSS样式来规避这个现象。首先...
粗上加粗的IE10字体宽到超出原本的容器
09-25
然而，IE10及以上版本却对这种叠加应用的加粗方式做出了不同的解释，它会执行两次加粗操作，导致字体异常粗大，甚至可能超出其父元素的宽度。 要解决这个问题，有几种策略可以采用： 1. **移除冗余的加粗**：如果...
VB编写的文本浏览器
12-15
【VB编写的文本浏览器】是一款基于Visual Basic (VB) 开发的简单文本编辑工具，它提供了基础的文本编辑功能，并允许用户自定义字体样式及颜色，增强了文本阅读和编辑的体验。这款应用主要面向初级编程学习者和需要...
bootstrap-table头部错位已完美解决
10-31
Bootstrap表格（bootstrap-table）是一款基于Bootstrap框架的前端插件，用于创建功能丰富的表格。在实际应用中，我们可能会遇到表格头部错位的...通过细心调试和适配，我们可以使表格在各种环境下保持良好的显示效果。
ie6兼容性问题
05-14
由于Internet Explorer 6（简称IE6）在很多CSS、JavaScript和DOM方面的实现与标准不一致，导致开发者在构建网页时需要额外考虑IE6的兼容性，以确保在这款老旧浏览器中的正常显示和功能。 1. **li边距“无故”增加**...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 755
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 655
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 514
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
JavaScript 常见数学用法
最新发布
2302_77250325的博客
07-17 185
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
tkinter的加粗字体
04-08
在Tkinter中，可以通过设置字体的样式属性来实现加粗字体的效果。具体步骤如下： 1. 导入Tkinter模块： ```python import tkinter as tk ``` 2. 创建一个Tkinter窗口： ```python window = tk.Tk() ``` 3. 创建一个标签(Label)并设置字体样式： ```python bold_font = ("Arial", 12, "bold") label = tk.Label(window, text="这是加粗字体", font=bold_font) ``` 在上述代码中，我们使用了`bold_font`变量来定义字体样式，其中`"Arial"`表示字体名称，`12`表示字体大小，`"bold"`表示加粗效果。 4. 显示标签： ```python label.pack() ``` 5. 进入主循环： ```python window.mainloop() ``` 这样，就可以在Tkinter窗口中显示加粗字体的标签了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Raccom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值