最近遇到一問題,就是前端Web工程師按照設計稿上,字體大小一樣但是實際顯示效果和設計稿又不相同。
這是為什么呢?思考一下便得到了問題所在是字體間距行距的問題。然后具體鎖定為間距的問題,因為行距只是關系到每行之間的距離而對每一行中字體相對位置沒有具體關系,廢話少說進入主題。
眾所周知,ps設計行業字體單位有像素、點、傍 等單位,我們這里以像素為例子,而所謂的間距“-100、-75、-50、。。。。0、。。。。100”,這些其實是個相對關系和實際字體大小相關,文字字體越大實際間距也就越大,反之就越小。
實際像素大小 real_letter_spacing,(單位為px)
文字字號 font,(單位為px)
文字間距 spacing,
它們的換算關系為:
real_letter_spacing = font / 1000 * spacing
如果一段文字的字號為23px , 間距為 100, 那么實際間距為 23px / 1000 * 100 = 2.3px。
從而得出前端字體間距設置2.3px方可與設計圖效果一致,實際測試也是如此,stype ="letter-spacing:2px";
ok至此大公告成。