如何計算CSS字母間距v.s.排版中的「跟蹤」？

Question

我有一個圖形設計器的指令，用於爲某些元素指定「軌跡100」的佈局。在CSS letter-spacing是「跟蹤」的等效屬性。

給定一個跟蹤值，你如何表示這是CSS的像素值？

Answer 1

您是否必須使用像素？我發現的轉換跟蹤值1000等於CSS中的1 em，因此在您的情況下，跟蹤100應該是0.1 em。

編輯

如果要從EM像素使用本網站PXtoEM.com。對於您的具體情況0.1 em轉換爲2px。然而，這是基於16pt字體，所以你將不得不調整你正在使用的特定字體大小。

Answer 2

跟蹤轉換CSS「字母間距」

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

Answer 3

TL; DR：除以1000跟蹤和使用em的

---

一點背景大約letter-spacing總是應用於文本，所以我們應該使用相對長度單位。由於font-size可以由用戶或甚至級聯改變。

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

該單位表示元素的計算字體大小。如果在font-size屬性本身上使用 ，則表示元素的繼承的 字體大小。 CSS Lengths - Mozilla Developer Network

爲什麼跟蹤有什麼不同？

佈局應用程序（如Adobe的Photoshop，Illustrator和InDesign）在其跟蹤中使用em來處理該單位，因此對於設計人員來說這是一個更容易使用的數字。爲了便於他們次它由1000

轉換跟蹤回整em的

要做到這一點，我們只需要1000分的追蹤號碼得到該單元回到CSS可以使用的全部時間。

所以50/1000 = 0.05em。

如果您正在使用SCSS並希望可重複使用的解決方案，CSS/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; 
} 

注： 你不應該使用基於像素的值，因爲像素是固定的，並打破wh en：

1. 設計師更改字體大小。您需要重新計算 的值。

2. 如果用戶更改他們的文字大小，您的網站設計將不會出現 根據需要或甚至難以閱讀。

此外，瀏覽器呈現不同於圖形設計程序的文本，因此，如果設計師在執行審閱時調整跟蹤/字母間距，不會感到驚訝。

Answer 4

對於大多數情況下，上述答案足夠準確，但是，正在使用的1000假設您的字體的Em尺寸爲1000，並非總是如此。我看過Em字體大小爲1024的字體，有些甚至是2048字體，這顯然會產生影響。

您可以通過在Font Forge之類的內容中打開字體的Em尺寸，然後選擇元素 - >字體信息菜單項和常規選項卡來查找字體的尺寸。