CSS Font dự phòng cho Glyphs Thiếu

Question

CSS:

p { 
font-family: Gill Sans, SFU GillSans; 
} 

"SFU GillSans" là một phông chữ cho ngôn ngữ tiếng Việt. Theo số this link, nếu p chứa ký tự tiếng Việt không có phông chữ Gill Sans thì trình duyệt sẽ tìm kiếm phông chữ đó ở dạng phông "SFU GillSans".

Có thể chuyển sang phông chữ thứ hai hoàn toàn, không chỉ một số ký tự, nếu phông chữ mặc định bỏ lỡ bất kỳ ký tự nào?

Answer 1

Với HTML/CSS thuần túy: không bạn không thể làm điều đó. Nhưng những gì bạn có thể làm là xác định glyph nào đang được sử dụng trong một chuỗi, so sánh với glyphs có sẵn trong một phông chữ, và có điều kiện đặt phông chữ khác nhau cho một phần hoặc toàn bộ trang bằng cách sử dụng lớp CSS.

Xác định glyph nào được sử dụng trong chuỗi có thể được thực hiện khi đang chạy bằng JavaScript hoặc sử dụng bất kỳ ngôn ngữ phía máy chủ nào.

---

Cập nhật: Tôi đã thêm ví dụ bên dưới đặc biệt cho tiếng Việt.

Tên và nội dung của VIETNAMESE_DIACRITIC_CHARACTERS và containsVietnamese có thể dễ dàng thay đổi để khớp (un) phạm vi ký tự được hỗ trợ trong dự phòng hoặc phông chữ chính của bạn. (cách tiếp cận danh sách trắng hoặc danh sách đen).

// From http://stackoverflow.com/a/26547315/451480: 
 
var VIETNAMESE_DIACRITIC_CHARACTERS = 'ẮẰẲẴẶĂẤẦẨẪẬÂÁÀÃẢẠĐẾỀỂỄỆÊÉÈẺẼẸÍÌỈĨỊỐỒỔỖỘÔỚỜỞỠỢƠÓÒÕỎỌỨỪỬỮỰƯÚÙỦŨỤÝỲỶỸỴ'; 
 

 
var paragraphs = document.querySelectorAll('p'); 
 

 
for (var i = 0, m = paragraphs.length; i < 1; i++) { 
 
    if (containsVietnamese(paragraphs[i])) { 
 
    paragraphs[i].className = 'vietnamese'; 
 
    } 
 
} 
 

 
function containsVietnamese(paragraph) { 
 
    var text = paragraph.innerText || paragraph.textContent; 
 
    for (var i = 0, m = text.length; i < m; i++) { 
 
    // Return true if VIETNAMESE_DIACRITIC_CHARACTERS contains the uppercase character from the paragraph 
 
    if (VIETNAMESE_DIACRITIC_CHARACTERS.indexOf(text[i].toUpperCase()) > -1) { 
 
     return true; 
 
    } 
 
    } 
 
}

p { 
 
    border: 1px solid #ddd; 
 
    font-family: myregularfont, sans-serif; 
 
} 
 
.vietnamese { 
 
    font-family: myvietnamesefont, serif; 
 
    background: green; 
 
}

<p>This paragraph should switch to a serif font: bằng "level, flat" ngang and huyền trắc "oblique, sharp" sắc, hỏi, ngã, and nặng</p> 
 
<p>Chinese (汉语/漢語; Hànyǔ or 中文; Zhōngwén) is a group of related but in many cases mutually unintelligible language varieties.</p> 
 
<p>English is a West Germanic language that was first spoken in early medieval England and is now a global lingua franca.</p>

Answer 2

Câu trả lời ngắn: không có. Đó không phải là những gì CSS có thể làm.

Phông chữ dự phòng thực sự có nghĩa là dự phòng, chứ không phải "chuyển phông chữ trên một số tín hiệu". Dự phòng chỉ được định nghĩa dưới dạng "nếu glyph X không nằm trong phông chữ A, hãy thử phông chữ B (nếu được chỉ định), rồi C, rồi ... cho đến khi chúng tôi tìm thấy họ phông chữ chung hoặc không có gì, trong trường hợp đó, hãy sử dụng phông chữ của phần tử gốc ".

Nếu đó là những gì bạn SFU GillSans sử dụng cho tất cả văn bản thậm chí có một ký tự tiếng Việt duy nhất, tại sao không chỉ sử dụng phông chữ có vẻ tốt và có hỗ trợ Latin-A thông qua Latin-D? Ví dụ: bạn có thể chỉ sử dụng SFU GillSans làm phông chữ chính, không phải là phông chữ dự phòng. Trên ghi chú CSS: bạn cần đặt dấu ngoặc kép xung quanh những tên đó. Giá trị gia đình phông chữ có các ký tự đặc biệt như dấu gạch ngang hoặc dấu cách cần phải được trích dẫn as per the CSS spec.