mac网页的字体如何兼容？

最新推荐文章于 2024-04-24 16:28:58 发布
最新推荐文章于 2024-04-24 16:28:58 发布
阅读量1.1k 收藏
点赞数
分类专栏： 坑 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plm609337931/article/details/104681182
版权
本文介绍了一种解决不同操作系统下字体显示不一致的问题，通过设置特定的字体族，确保在Mac、Windows等平台上谷歌浏览器和其他浏览器能统一字体样式，提高网页的视觉一致性。

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

比如看下面的mac字体：

正常windows谷歌等浏览器的字体：

解决方案：

style="font-family: -apple-system, 'PingFang SC','Microsoft YaHei','SimSun','Arial', sans-serif;font-style: normal;"

网页浏览器字体渲染优化
Spike_1024的博客
11-29 860
此教程不仅限于浏览器设置，还包括 Mac 平台字体移植 Windows 平台的解决方案。教程实例采用系统自带 Edge 浏览器，其他浏览器可能存在内置字体渲染方式不同，未经测试适用性不明，请自行斟酌按需服用。
mac html字体设置,Mac Ｗin 网页字体显示方案
weixin_42510188的博客
06-20 1563
Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点，而在这些年亲身使用后，个人感觉Mac下的字体确实看起来比Win下舒服些，特别是在浏览网页时，字体比较“珠圆玉润”，可惜的是Mac目前并不是主流，大多数还是Win用户。所以即使你所使用是Mac，在设计仍然要记得平衡Win下的效果。Mac和Win的显示区别截了段文字做了个对比,很容易看得出来，字体显示起来是有很大的差别的。Mac下文字...
mac 设置网页字体
weixin_34297704的博客
02-28 787
参考:　　如何设置 font-family 比较好以及字体的中英文名 mac下查看字体英文名称的方法:  　　1、字体册中选中字体 　　2、如图: 　　　　
IOS字体适配
qq_38677540的博客
05-13 445
h5页面在IOS上的字体大小不一样 -webkit-text-size-adjust: none; 作用：禁用Webkit内核浏览器的文字大小调整功能，以实际大小显示，部分浏览器不支持小于12px的字号将使用12px字体。 这是一个实验中的功能 此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。 控制将一些手机或平板设备上使用的文本溢出算法（text inflati..
Safari浏览器对不兼容中文字体
weixin_30530939的博客
07-22 1234
1 <p style="font-family:宋体"><span>中文</span><span>English</span><span>한국의</span><span>日本の言語</span></p> 把这行代码放在IE,FireFox,Opera,Chrome,Sa...
全平台通用中文字体设置 font-family css 2019
CloudJay的博客
09-11 3498
兼容windows,mac body{ font-family: Georgia, "Times New Roman", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif; }
CSS - font-size 设置小字体不生效解决方案（小于12px）
王二红
05-08 1万+
前言 使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。 原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此。 解决方案 如果执意要设置小于 12px 的字体，那只能使用 transform: scale() 缩放属性来实现。 /* 小于12px 的字体 */ .txt { -webkit-transform: scale(0.5) } 兼容写法 有些浏览器允许设置小于 12px 的字体，那么你
Web字体格式介绍以及浏览器兼容性一览
12-09
其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，具体实现例子将在下一篇文章介绍，本文介绍主要的几种Web字体格式及各浏览器兼容情况。 Web字体格式介绍 TrueType (.ttf) 　...
网页制作 默认Web字体样式
09-25
例如Arial字体，它的优势在于Windows和Mac系统中都预装了Arial字体，使其成为最常用的网页字体之一。Arial字体的另一个优势在于它在Windows中使用，而在Mac系统中则使用Helvetica字体，这样可以保证在不同系统中的...
在网页上使用苹方字体
热门推荐
羽筠的博客
11-21 5万+
苹方提供了六个字重，font-family 定义如下： 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-
【bug】解决font-family 仿宋体不生效问题
daddykei的博客
06-09 1368
提示：让仿宋体生效系统环境： MacBook Pro（13英寸，M2，2022年）
css之样式惨案-字体族学习
努力学习前端的阿猪
01-11 448
项目场景： UE同学反馈 字体未加粗、文字之间分割线没有与文字居中对齐。 定位到了问题后，我发现字体确实已经加粗，而且设置的flex布局通过align-items设置了垂直居中。在安卓上，字体加粗了，而iphone上字体未加粗。所以我认为这又是一个难搞的兼容问题… 尝试了各种方案发现就是没效果 然后发现加粗问题是字体族写错了… font-family: PingFangSC-Medium; // 而我拼成了 // font-family: PingFangSC-Meduium; // 就离谱....
前端页面Mac和Windows系统展示不一样原因
最新发布
xxx
04-24 757
需要统一设置fontFamily字体。
uniapp项目所遇问题总结
wwppp987的博客
11-28 2067
1.想让一个盒子内的text标签下的文字实现左下角对齐 目前的解决办法是设置padding，使文字下移，同时需要设置box-sizing: border-box; 2.设置字体小于12px（9px），使用transform: scale(0.75);，但是会留有空白，不能中间对齐 目前的解决办法是设置：transform: scale(0.75);transform-origin:0 0;使得文字原点为左上角，然后实现居中。 同时可以对应的放大盒子的width，来消除留白 3.设置一个盒子往上覆盖一部分上面
Mac 电脑浏览器字体显示异常解决方案
SlowFeather's blog
04-26 4999
Mac 电脑浏览器字体显示异常解决方案前言解决方案 前言 突然发现浏览器中部分字体有问题。 例子：mac 电脑Safari浏览器中某些页面的文字有夹杂的书法字体 解决方案 打开「字体册」，选择菜单栏「文件」中的「恢复标准字体」。 参考: https://zhidao.baidu.com/question/201030114905504005.html ...
小程序安卓和ios使用自定义字体，解决安卓不生效问题
weixin_43794749的博客
07-09 7010
官网介绍 官网文件的loadFontFace也可以实现自定义字体引入和使用，如果需要在app.js使用记得加上global：true，不然app.js不会执行 背景：项目中要把所有字体改为宋体，这里我使用的是font-face引入外部字体文件 准备字体文件 这里我准备的是OTF的文件，是找UI要的。 把该文件上传到自己的服务器上，生成一个访问的链接。 在app.wxss中使用 @font-face { font-family: 'SimSun700'; src: url('链接地址必须是h
前端项目，引入PingFang SC字体
weixin_30553777的博客
08-06 1万+
在仿苹果官网"垃圾桶"时， 设计出的UI使用PingFang SC 字体，在网上查了很久，特记录。如果你有更好的方法，欢迎评论留言~ 实现原理，使用@font-face将字体下载在用户电脑中，然后font-family使用字体。 关于font-face链接 css: @font-face { font-family: 'myFont'; src: ...
Mac和Windows系统中网页字体显示方案对比
移动开发
11-27 3205
From: http://www.websbook.com/alltext/shijue/MachWindowsxtzwyztxsfadb_21188.html     您所在的位置： 首页 &gt; 网页设计 &gt; 视觉设计 &gt; Mac和Windows系统中网页字体显示方案对比 Mac和Windows系统中网页字体显示方案对比 2012-09-12 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值