如何在CSS

Question

我想有默認的系統應用默認OS系統「中的」字體「中等」（或「semibold」如果你喜歡），使用CSS顯示在多種操作系統的字體，如：

• 的窗口：瀨越UI SemiBold
• 在Android上：中等的Roboto
• 在iOS上：......有一個？

我已經嘗試使用：

font-family: Segoe UI, -apple-system, sans-serif; 
font-weight: 600; 

，但我發現比的Roboto中針對Android胖字體。

如果我用這個來代替：

font-family: Segoe UI, -apple-system, sans-serif-medium, sans-serif; 
font-weight: 600; 

我在Android上得到一個大膽比正常的Roboto字體中。

什麼是最好的交叉操作系統解決方案？請注意，如果「中等」字體不可用，我想回到比正常字體更大膽（因此字體重量：600）。至少該解決方案需要在Windows，iOS和Android上運行，並在其他地方優雅地回退。

Answer 1

您是否考慮過使用Google Fonts中等重量的免費Roboto字體？它的支持非常出色，您可以將它的全局重量設置爲600，從而使其在大型設備上保持一致。

但是請注意，對於不支持svg/woff/ttf字體的設備（幸好不是很多目前正在使用的設備），您將無法使用這種字體並且不得不選擇後備字體。

Answer 2

我認爲如果你想達到這個目的，你需要檢查哪個操作系統正在打電話給你的網站。因此檢查Thye User Agent是實現特定操作系統的一種方式。

我會建議你使用這個JS代碼：

var doc = document.documentElement; 
doc.setAttribute('data-useragent', navigator.userAgent); 

然後在你的CSS，你會有這樣的事情：

html[data-useragent*='Mac OS X'] { 
    font-family: "Segoe UI", sans-serif; 
    font-weight: 600; 
} 

html[data-useragent*='Android'] { 
    font-family: "Roboto Medium", sans-serif; 
    font-weight: 600; 
} 

我要說的是，iOS版的默認字體將是： Lucida Grande。但我不確定，所以也許你可以搜索那個