如何計算 CSS letter-spacing v.s. 「tracking」在排版中？

問題描述

我有一個圖形設計師的指令，用於為某些元素指定「track 100」的佈局。在 CSS 中 letter-spacing 是”tracking” 的等效屬性。

給定一個跟蹤的值，你如何將它表示為 CSS 的畫素值？

最佳解決方案

你必須使用畫素嗎？我發現的轉換是 CSS 中的跟蹤值為 1000，等於 1 em，所以在你的情況下跟蹤 100 應該是 0.1 em 。

編輯

從 EM 到畫素使用本網站 PXtoEM.com 。對於您的具體情況，0.1 em 轉換為 2px 。但是這是基於 16pt 字型，因此您必須根據您使用的特定字型進行調整。

次佳解決方案

跟蹤轉換 CSS 「letter-spacing」

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

第三種解決方案

長話短說：將跟蹤除以 1000，並使用 em

關於 letter-spacing 的一些背景總是應用於文字，所以我們應該使用一個相對長度的單位。由於 font-size 可以由使用者改變，甚至可以透過級聯改變。

文字長度的最佳單位是 em 單位。

This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. CSS Lengths – Mozilla Developer Network

為什麼跟蹤不一樣？

Adobe 的 Photoshop，Illustrator 和 InDesign 等佈局應用程式使用 em 進行跟蹤，但操作該單元，這對於設計人員來說更容易。為了使它更容易，它們可以 1000 次。

將跟蹤轉換回整個 em

為了做到這一點，我們只需要將跟蹤號碼除以 1000 即可將該裝置重新整合到 CSS 中。

所以 50/1000 = 0.05em 。

在 CSS /SCSS 中進行計算

如果您正在使用 SCSS 並且想要一個可重複使用的解決方案 – 這裡是一個 mixin 。

// Convert illustrator, indesign and photoshop tracking into letter spacing.

@function tracking( $target ){
  @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
  letter-spacing: tracking( $target );
}

要使用上述功能，您只需執行此操作即可。

.example {
  @include tracking(50);
}

或者，您可以只是內聯數學，而不用混合，所以它不太抽象：

.example{
  letter-spacing: #{(50/1000)}em;
}

上述示例的輸出將是：

.example {
  letter-spacing: 0.05em;
}

注意：您不應該使用畫素為基礎的值，因為畫素是固定的，並在以下情況下中斷：

設計師改變了 font-size 。您需要重新計算該值。
如果使用者更改其文字大小，您的網站設計將不會根據需要顯示，甚至難以辨認。

另外，瀏覽器渲染文字不同於圖形設計程式如何做，如果設計師調整跟蹤/letter-spacing 的執行情況，不要感到驚訝。

參考文獻

How to calculate CSS letter-spacing v.s. 「tracking」 in typography?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何計算 CSS letter-spacing v.s. 「tracking」在排版中？