请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

139

主题

256

帖子

1639

积分

超级版主

Rank: 8Rank: 8

积分
1639
Winny
超级版主   /  发表于:2024-9-18 16:33  /   查看:88  /  回复:0
上文我们了解了同一个字体为什么在自己的app和网页端展示不同的一些原因,本文我们继续了解为什么同样的字体,在不同浏览器会展示不同的效果。关于字体渲染,其实本质是一个多方因素影响的结果,如果详细解析还是比较复杂的,这里我推荐给大家一个文章"网站字体渲染,聊聊各浏览器下字体排版不一致的问题",感兴趣可以自行了解一下。本文会主要解释浏览器渲染字体的一些基本原理。
在做文件渲染时,我们经常会好奇,浏览器到底都支持那些字体?
首先,浏览器支持什么字体取决于用户系统里都安装了什么字体,比如,当我们使用如下CSS时:
  1. font-family: "微软雅黑","黑体","宋体";
复制代码
那么浏览器会尝试按照从左到右的顺序依次应用,假设用户设置了微软雅黑字体,但是电脑上并没安装,那么就用黑体。此时,有的开发人员就会纳闷,这个世界上这么多字体,我怎么保证用户电脑上有我期望的字体呢(这其实也是分享文件时,为什么更喜欢用PDF形式的原因之一)?美工给的效果满足用户预期,在开发笔记本上也可以完美展示,但到了领导或甲方电脑上就一团糟,这不得被骂死。而关于此问题,有以下解决方案
1. 使用CSS设置备用字体
接触过前端开发的同学,在设置字体时,可能会经常碰到一下几个单词,“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。这其实代表得是5类字体,并不是5个字体。例如Serif表示字体成比例、且上下有小横线(例如Times New Roman),那么符合这个特征的字体都可以算为Serif,而具体采用了那个字体,是浏览器根据用户电脑上安装了哪种字体采用一个默认的,各浏览器可能都不相同。几乎所有普通字体都可以落入这5种字体类中。这样可以一定程度上解决一部分字体缺失时,显示不一致问题。但始终是无法保证,不同客户端渲染的字体都是完全一致的。
因此更不能说我们把浏览器展示的字体和导出PDF中的字体去对比,因为有可能网页中展示的字体并不是实际设置的字体样式,两者完全没有可比性。
2. 服务器下载字体
如果最终用户要求苛刻,必须不同浏览器展示相同,且必须使用实际设置的字体。对于这种情况,CSS也提供了对应的支撑,我们可以使用font-face让用户的浏览器从服务器上下载字体。
  1. @font-face {
  2.     font-family: 美轮美奂的字体;
  3.     src:url('字体文件1.woff'),  
  4.     url('字体文件2.ttf'),
  5.     url('字体文件3.eot');
  6. }
复制代码
为什么还需要设置好几个URL指向多个字体文件,只能说还是为了兼容性,怕有的字体在当前操作系统重中不支持。
3. 文字转图片
我们可以将想要的文字做成文字图片,但这样做的缺陷也是十分明显的,例如不利于网页SEO,不方便修改等等。

综上所述,字体渲染一致性本身就受多方因素印象,无论使用什么产品,都很难去保证各平台浏览器完全一致性,大家主要是了解原理,尽力去避免不一致问题即可。至少做到用到的字体都是保证一定是已安装的正确字体。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部