所在位置：
首页 >
营销资讯 >
网站运营 > 网页设计稿完成后，如何在页面实现过程中（Web前端重构中）保证字体效果和设
网页设计稿完成后，如何在页面实现过程中（Web前端重构中）保证字体效果和设
时间：2023-12-11 13:54:01 | 来源：网站运营
时间：2023-12-11 13:54:01 来源：网站运营
网页设计稿完成后，如何在页面实现过程中（Web前端重构中）保证字体效果和设计稿一致？：本答案已过期。
Photoshop 从 CC 版本开始支持模仿系统渲染风格的模式。
= = =
Photoshop 字体渲染的全部四种抗锯齿选项都是像素级别的
灰阶抗锯齿，而非
亚像素抗锯齿。但现在主流的操作系统和浏览器字体渲染都是亚像素抗锯齿的（比如 Windows 的 ClearType）。这是根本的隔阂。除非你提前计划要用 WebKit 的私有属性强制关闭浏览器的亚像素平滑，然后用 Photoshop 制作设计稿的时候就选择最接近你目标浏览器的抗锯齿选项，否则基本不要指望抗锯齿之后的字体渲染还和 Photoshop 里一样。
有一种方法 [1] 能简单模仿亚像素平滑，这能提高字体平滑程度，但不能模仿操作系统和浏览器的字体渲染效果。
关于数值转换：
- 如果文档的分辨率是 72 pixels/inch，那么字体大小默认用的单位「pt」就是和「px」一样大的。Photoshop 里 12 pt 应当在网页中定义为等效 12 px 的大小。
- 如果文档的分辨率不是 72 PPI，自己又搞不清楚 pt 和 px 的转换，最好在首选项的「单位与标尺」页面把字体使用的单位改成 px。
- Photoshop 的字符间距单位是 1/1000 em，而 1 em 的大小就是当前的字体大小。所以如果字体大小是 10 px，字符间距为 100，那在 CSS 里就该定义 letter-spacing 为 0.1em 或 1px。
- Photoshop 的行高和 CSS 的行高定义没有区别，都是上下两条基线之间的距离（英文版 Photoshop 里用原意不同的「leading（行间距）」虚指行高）。
- 「文字和周围元素的间距」，这不是 margin 和 padding 的问题吗？该是多少就是多少，然后根据渲染差异来微调。
我觉得一位优秀的设计师应该直接提供 CSS 里需要的数值。
不同浏览器和不同操作系统的字体渲染千差万别，前端设计师应该掌握应有的「弹性」。如果你无法容忍弹性，就只能像 @江疆 说的一样插入图片了。自己抉择。
另外，这个问答关于如何在 OS X 版本的 Photoshop 中制作 Windows 那样的点阵宋体，可能有用：
Mac OS X 里 Photosohop 如何实现清晰的点阵宋体效果？
http://www.zhihu.com/question/19598934[1]《Yes, add Subpixel-Rendering to your Photoshop text layers》
http://thomasmaier.me/blog/2010/03/17/yes-add-subpixel-hinting-to-your-photoshop-text-layers/
在线咨询
