2017-08-13 24 views
25

Bất cứ ai có thể giải thích cho tôi tại sao khi tôi đặt lang="ar" họ phông chữ chọn sans-serif phông chữ trong khi khi đó là lang="en", hãy chọn Open Sans.Lựa chọn glyph khác nhau cho các ngôn ngữ khác nhau

<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>

+6

Có lẽ Open Sans không bao gồm các ký tự được yêu cầu cho ngôn ngữ đó? Trong trường hợp này, nó sẽ rơi trở lại phông chữ tiếp theo trong dòng. –

+0

@NiettheDarkAbsol Cảm ơn rất nhiều, câu trả lời hữu ích ngắn. hãy đặt câu trả lời làm câu trả lời và tôi sẽ chấp nhận. – user3260672

+0

Bạn có thể sắp xếp theo ngôn ngữ trên fonts.google.com –

Trả lời

5

gì đang xảy ra là 01.. Vì vậy, trong cả hai đoạn của bạn, Open Sans không được áp dụng ở tất cả, và trình duyệt đi thẳng đến phông chữ dự phòng.

Lý do phông chữ trông khác nhau trong cả hai đoạn mã của bạn là bởi vì trong đoạn mã đầu tiên của bạn, trình duyệt biết ngôn ngữ là tiếng Ả Rập do thẻ lang. Nó yêu cầu hệ thống cho phông chữ dự phòng sans-serif tốt nhất cho tiếng Ả Rập và trên máy Mac này là Geeza Pro Regular.

Trong đoạn mã thứ hai của bạn, trình duyệt cho rằng ngôn ngữ là tiếng Anh và yêu cầu phông chữ dự phòng tốt nhất cho tiếng Anh. Trên máy Mac, đây là Arial.

Cả Geeza Pro và Arial rõ ràng đều có hỗ trợ cho văn bản tiếng Ả Rập, nhưng tùy thuộc vào ngôn ngữ thực tế, hệ thống chọn một ngôn ngữ khác.

11

Không phải tất cả các phông chữ chứa tất cả các ký tự. Nhiều khả năng, Open Sans không bao gồm các ký tự chính xác cho ngôn ngữ đó và do đó trình duyệt sẽ rơi xuống phông chữ tiếp theo trong dòng, v.v. cho đến khi tìm kiếm các phông chữ hệ thống có thể có ký tự bạn cần. Cuối cùng, nếu mọi thứ khác thất bại, bạn sẽ nhận được "đậu phụ", thường là một ô trống, một ô có dấu X hoặc một hộp chứa mã hex của ký tự.

Bạn có thể tìm thêm thông tin trong thông số W3C CSS Fonts Module Level 3 chính thức: https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm.

+6

Điều đó không có ý nghĩa. Việc thiết lập thuộc tính lang ảnh hưởng như thế nào đến các ký tự nằm trong phông chữ? – Alohci

+0

@Alohci nhận xét của bạn làm tôi bối rối một lần nữa, câu hỏi của bạn là hợp lệ. – user3260672

+0

@Niet the Dark Absol, bạn có thể giải thích như thế nào không ?. – user3260672

3

Thuật toán fallback là hoàn toàn tùy thuộc cho nhà cung cấp, vì vậy mỗi trình duyệt có thể khác trong việc thực hiện riêng của mình.

Điều gì thường xảy ra?

  1. Xác định fontFamily danh sách: a, b, c, d;

Danh sách này có mức độ ưu tiên, do đó, trình duyệt sẽ tra cứu từ l0 => ln.

  1. glyph lookup step: Các TextEngine cố gắng rút ra những văn bản xem xét danh sách nhất định và nó một cách duyên dáng fallbacks l0-ln.

Bởi vì văn bản của bạn السلام عليكم không thể được trả lại với fontFamily ưa thích đầu tiên của bạn, nó fallbacks để any sans-serif

Bạn có thể tìm thấy một sâu hơn giải thích ở đây: https://stackoverflow.com/a/29242255/4099454

+0

Nhưng cả hai phông chữ đều có glyphs bên trong như bạn có thể thấy ở đoạn mã. Phông chữ thay đổi khi thuộc tính 'lang' thay đổi và nó đặt Open Sans hoặc sans-serif và [bình luận của Ilya] (https://stackoverflow.com/users/2533215/ilya-streltsyn) khá giải thích tại sao điều đó xảy ra. –

0

Đối với lý do không rõ sự '-' char của sans-serif là một vấn đề cho ngôn ngữ arabic, bây giờ tất cả các công trình ^^

<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>

Các vấn đề liên quan