关于字体的那些事（一）

背景：很多用户经常会把SpreadJS渲染出来的文件中字体和GCExcel导出PDF字体做比较，发现会有一些不一致的问题。关于字体其实是一件比较复杂的事情，本文纯做科普。

首先，我们来看一个网络上很火的问题，"在PhotoShop中输入的微软雅黑为什么和网页中得微软雅黑效果不一致"？
分析该问题原因，其实可以归纳为好几类，分别如下：
1. 字体版本差异
不同的操作系统或者不同版本的字体可能会存在差异，例如Windows系统中的微软雅黑可能与Mac OS中的版本略有不同。
2. 渲染引擎不同
PhotoShop使用的是Adobe的字体渲染技术，而网页浏览器使用的是各自操作系统提供的文本渲染引擎（如Chrome的Blink或Safari的WebKit），不同的渲染引擎会导致字体呈现的效果有所不同。
3. 抗锯齿设置
在PhotoShop中，可以调整文字的抗锯齿设置（例如清晰、锐利、强烈、平滑等），这会影响文字的外观，而在网页中，浏览器默认的文本渲染设置也会影响到最终的文字显示效果。
4.分辨率与缩放比例
PhotoShop中查看图片分辨率（DPI）与网页浏览器中屏幕分辨率可能不同。另外，在不同设备上的缩放比例也可能导致视觉上的差异。
5. 屏幕校准与色彩管理
不同显示器得颜色校准和色彩管理设置也会导致字体颜色和对比度看起来不同。
6.浏览器兼容性
网页中使用的字体可能受到浏览器兼容性和支持程度的影响，某些浏览器可能无法正确加载或显示特定的字体文件。
如果期望尽可能的使得两者效果一致，可以尝试以下方法：
1. 使用相同得字体版本
确保在PhotoShop和网页设计中使用相同版本的字体。
2. 调整渲染设置
在PhotoShop中调整文字的抗锯齿设置，阐释找到最接近网页显示效果的设置。
3. 考虑使用Web Fonts
如果可以控制网页的设计，则可以考虑使用Web Fonts技术，通过@font-face规则嵌入字体文件，确保所有用户看到的字体都是相同的。
4. 检查缩放和分辨率
确保在不同环境下，文字的大小和分辨率保持一致。


这里以PhotoShop为例，列出的是我们常用的app为什么和浏览器字体显示不一致的问题。完全消除这种差异是非常困难的，因为涉及到的因素很多，但是可以通过一些调整使得使用效果更佳接近。后续我们会继续介绍，为什么同一个文件在不同用户浏览器中也会展示出不同的形式的原因。