所在位置：
首頁 >
營銷資訊 >
網站運營 > 網頁設計稿完成后，如何在頁面實現過程中（Web前端重構中）保證字體效果和設
網頁設計稿完成后，如何在頁面實現過程中（Web前端重構中）保證字體效果和設
時間：2023-12-11 13:54:01 | 來源：網站運營
時間：2023-12-11 13:54:01 來源：網站運營
網頁設計稿完成后，如何在頁面實現過程中（Web前端重構中）保證字體效果和設計稿一致？：本答案已過期。
Photoshop 從 CC 版本開始支持模仿系統(tǒng)渲染風格的模式。
= = =
Photoshop 字體渲染的全部四種抗鋸齒選項都是像素級別的
灰階抗鋸齒，而非
亞像素抗鋸齒。但現在主流的操作系統(tǒng)和瀏覽器字體渲染都是亞像素抗鋸齒的（比如 Windows 的 ClearType）。這是根本的隔閡。除非你提前計劃要用 WebKit 的私有屬性強制關閉瀏覽器的亞像素平滑，然后用 Photoshop 制作設計稿的時候就選擇最接近你目標瀏覽器的抗鋸齒選項，否則基本不要指望抗鋸齒之后的字體渲染還和 Photoshop 里一樣。
有一種方法 [1] 能簡單模仿亞像素平滑，這能提高字體平滑程度，但不能模仿操作系統(tǒng)和瀏覽器的字體渲染效果。
關于數值轉換：
- 如果文檔的分辨率是 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 的行高定義沒有區(qū)別，都是上下兩條基線之間的距離（英文版 Photoshop 里用原意不同的「leading（行間距）」虛指行高）。
- 「文字和周圍元素的間距」，這不是 margin 和 padding 的問題嗎？該是多少就是多少，然后根據渲染差異來微調。
我覺得一位優(yōu)秀的設計師應該直接提供 CSS 里需要的數值。
不同瀏覽器和不同操作系統(tǒng)的字體渲染千差萬別，前端設計師應該掌握應有的「彈性」。如果你無法容忍彈性，就只能像 @江疆 說的一樣插入圖片了。自己抉擇。
另外，這個問答關于如何在 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/
在線咨詢
