不同的字形選擇不同的語言

任何人都可以向我解釋爲什麼當我設置lang="ar"字體家族選擇sans-serif字體，而當它是lang="en"它選擇Open Sans。不同的字形選擇不同的語言

<html lang="ar"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', sans-serif;"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

<html lang="en"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', sans-serif;"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

來源

2017-08-13 user3260672

也許Open Sans不包含該語言所需的字符？在這種情況下，它將回退到下一個字體。 –

@NiettheDarkAbsol非常感謝，有用的簡短回答。請把它作爲答案，我會接受它。 – user3260672

您可以通過fonts.google.com –

這是怎麼回事就是Arabic characters are not supported by Open Sans。因此，在這兩個片段中，Open Sans根本沒有被應用，瀏覽器直接進入後備字體。

字體在您的代碼片段中看起來不同的原因是，在您的第一個片段中，瀏覽器由於lang標籤而知道該語言是阿拉伯語。它要求系統爲阿拉伯語提供最佳sans-serif備用字體，在Mac上這是Geeza Pro Regular。

在您的第二個片段中，瀏覽器認爲語言是英語，並要求爲英語最好的sans-serif備用字體。在Mac上，這是Arial。

Geeza Pro和Arial都顯然支持阿拉伯語文本，但根據實際的語言，系統會選擇一種。

來源

2017-08-22 08:24:04 RoelN

不是所有的字體包含的所有字符。最有可能的是，Open Sans不包含該語言的正確字符，因此瀏覽器將依次排列到下一個字體，依此類推，直到查找可能具有所需字符的系統字體。最後，如果一切都失敗了，你會得到「豆腐」，通常是一個空盒子，一個帶X的盒子或一個包含字符十六進制代碼的盒子。

您可以在官方W3C CSS Fonts Module Level 3規範中找到更多的信息：https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm。

來源

2017-08-13 08:33:22

這沒有意義。如何設置lang屬性影響哪些字符在字體中？ – Alohci

@Alohci你的評論再次讓我困惑，你的問題是有效的。 – user3260672

@Niet the Dark Absol你能解釋一下嗎？ – user3260672

的回退算法完全取決於給供應商，所以每個瀏覽器可以在它自己的實現有所不同。

通常會發生什麼？

定義您的fontFamily列表：a, b, c, d;

此列表以優先級爲基礎，因此，瀏覽器將從l0 => ln查找。

glyph lookup step：本TextEngine試圖繪製考慮給定的列表中的文本，並將其回退擺好從l0到ln。

因爲你的文字السلام عليكم不能與你的第一個首選fontFamily中被渲染，這回退給any sans-serif

你可以在這裏找到一個更深入的解釋：https://stackoverflow.com/a/29242255/4099454

來源

2017-08-15 16:44:50 Hitmands

但是這兩種字體都有字形，正如你在代碼片段中看到的那樣。當lang屬性改變時，字體會改變，它會設置Open Sans或sans-serif和[Ilya的評論]（https://stackoverflow.com/users/2533215/ilya-streltsyn）可以很好地解釋爲什麼會發生這種情況。 –

原因不明「 - 」無襯線成炭是爲阿拉伯語一個問題，現在所有的作品^^

<html lang="ar"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', 'sans-serif';"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

<html lang="en"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', 'sans-serif';"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

<html lang="it"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', 'sans-serif';"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

<html lang="zu"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body style="font-family: 'Open Sans', 'sans-serif';"> 
 
    السلام عليكم 
 
</body> 
 

 
</html>

來源

2017-08-22 08:09:29

不同的字形選擇不同的語言

回答

相關問題