浏览器字体适配之如何优雅的选择字体

最新推荐文章于 2025-04-21 12:43:13 发布

HerayChen

最新推荐文章于 2025-04-21 12:43:13 发布

阅读量2.2k

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_45832807/article/details/131246940

版权

没有设置字体包的时候每个浏览器默认字体不一样，由于浏览器的差异，谷歌显示的字体可能是微软雅黑，但是Safari或者火狐的字体是宋体的。

如何优雅的选择字体？

在这里插入图片描述

个人常用的推荐写法：

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HerayChen

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

网页浏览器字体渲染优化

Spike_1024的博客

11-29

907

此教程不仅限于浏览器设置，还包括 Mac 平台字体移植 Windows 平台的解决方案。教程实例采用系统自带 Edge 浏览器，其他浏览器可能存在内置字体渲染方式不同，未经测试适用性不明，请自行斟酌按需服用。

H5分享链接，禁止微信浏览器放大字体导致排版错乱不适配问题

weixin_45759427的博客

08-10

729

当APP内的H5链接需要禁止webview缩放字体需要安卓前端配置： webview.getSettings().setTextZoom(100),这个方法可以设置webview内部字体的缩放比例当分享至微信浏览器时，需要在H5内配置以下代码禁止微信浏览器对H5页面内的字体缩放 <body style="-webkit-text-size-adjust: 100%!important;"> @RenderBody() <script type="text/javasc

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

所有浏览器中都能正常显示的字体

03-20

NULL 博文链接：https://huanyq2008.iteye.com/blog/705221

Web字体格式介绍以及浏览器兼容性一览

09-25

介绍主要的几种Web字体格式及各浏览器兼容情况。

微软Edge浏览器字体设置

最新发布

NSJim的博客

04-21

2429

自2025年4月起，微软Edge浏览器的默认字体被微软从微软雅黑替换成了Noto Sans，如下图。Noto Sans字体与微软雅黑风格差不多，但在4K以下分辨率的显示器上较微软雅黑更模糊，因此低分辨率的显示器建议将字体换回微软雅黑，下文介绍设置方法。

所有浏览器都支持的字体

weixin_30505225的博客

03-25

1445

font-family: Arial, Helvetica, sans-serif;font-family: 'Arial Black', Gadget, sans-serif;font-family: 'Bookman Old Style', serif;font-family: 'Comic Sans MS', cursive;font-family: Courier, monosp...

浏览器支持什么字体？

程序员一枚，仅记录工作中的难点

01-30

2351

浏览器支持什么字体

不同的浏览器都能显示好看的字体

cljljk的博客

06-27

1568

在css里把最大的body的字体设置 body{font:12px/1.5 Tahoma,'Microsoft Yahei','Simsun';} 意思是：字体的大小----字形为微软雅黑-----或者字形为微软宋体

font face如何导入自定义字体

YUSIR 完美CODING世界

12-11

527

首先，浏览器支持什么字体取决于用户系统里安装了什么字体，比如CSS中这么写： font-family:"微软雅黑","黑体","宋体"; 那么浏览器会尝试按照从左到右的顺序依次应用，假设用户电脑上没有安装微软雅黑，那么就用黑体。接下来，开发人员有点郁闷了，这个世界有这么多字体，我怎么保证用户电脑上有我希望的字体呢？美工给我的完美效果，到了老板电脑上一团糟，会不会被骂死？这时，CSS勇敢的站...

分享一些我在各大IDE，浏览器用的字体

fjc_2013的博客

01-26

465

先放链接～链接：https://pan.baidu.com/s/1mTBY9ZuxwN-BFFcXHXdcZg?pwd=SLSI提取码：SLSI二维码：永久有效。

weixin_33695082的博客

09-06

1128

首先要说的是我不喜欢雅黑，当然也不喜欢超过12px的宋体，从macbook回到win后一段时间很纠结各种字体，好在有个神器叫做 Advanced Font Settings，让我看网页更加舒心。 Advanced Font Settings 是一个chrome扩展，你在国内比如360安全浏览器、极速浏览器、猎豹浏览器上都可以安装，按理来说...

通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择。

qq_34569508的博客

02-27

191

http://www.zhangxinxu.com/wordpress/2018/02/js-detect-suppot-font-family/ 本文根据张鑫旭文章。字体函数： var dataFont = { windows: [{ ch: '宋体', en: 'SimSun' }, { ch: '黑体', ...

fontloader:适用于现代浏览器的小巧快速的字体加载器

06-02

字体加载器适用于现代浏览器的小巧快速的字体加载器这是基于代码，并进行了修改以使其更适合我的项目。用法要使用，请生成 WOFF 和 WOFF2 格式的 CSS 文件（fontsquirrel.com 是一个很好的地方），并在 URL /fonts/fonts.woff.css 和 /fonts/woff2.css 上提供它们。这个 Javascript 文件是一个立即执行的函数，缺少参数。将此脚本放在任何外部样式表之前的文档头中，并使用 CSS 文件的最后修改时间戳附加函数调用的参数，如下所示： (function f(modifiedDate) {...})(1428208579) 这最好使用构建工具或某种动态生成的页面来完成。附加时间戳用于缓存破坏。基本原理像 Google Fonts 这样的服务对于快速轻松地将字体添加到页面上非常有用，但需要额外的 DNS 查找

vue项目在webpack2实现移动端字体自适配功能

11-20

本篇文章将详细介绍如何利用Webpack2在Vue项目中实现移动端字体自适配功能。首先，我们需要安装两个关键的插件：`px2rem-loader` 和 `lib-flexible`。这两个插件协同工作，帮助我们实现px到rem的转换以及动态调整...

Mac端Safari浏览器CSS自定义及字体适配指南

由于中文简体、中文繁体、英语以及其他地区语言的书写习惯和字体样式不同，进行地区语言字体适配是十分必要的。在Safari的自定义CSS样式表中，可以根据页面的语言属性，适配不同的字体样式，确保在不同语言环境下...

font-face 使用

weixin_30338461的博客

07-20

214

使用@font-family时各浏览器对字体格式（format）的支持情况

weixin_45088858的博客

06-30

886

ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

浏览器通用字体

chuyaonong6148的博客

06-28

345

body{ font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft YaheiUI","Microsoft Yahei",SimHei,"\5B8B\F53",simsun,sans-serif; } ...

字体格式选择与浏览器兼容性分析

weixin_41888295的博客

05-10

2649

Typekit字体在大多数主流浏览器中都能够良好地显示，但在一些特定的浏览器中可能会有一些小问题，比如在Edge浏览器中可能会出现一些渲染问题。宋体是最常用的一种中文字体格式。黑体在几乎所有主流浏览器中都能够显示，但在一些老旧的浏览器中可能会出现一些问题。华文细黑在所有主流浏览器中都能够显示，但在一些老旧的浏览器中可能会出现一些问题。衬线体在主流浏览器中都能够良好地显示，但在一些旧版本的浏览器中可能会出现一些问题。在Chrome中，大多数字体都可以正常显示，但在一些老旧的浏览器中可能会出现一些渲染问题。