CSS:CSS Font Fallback per glifi mancanti
p {
font-family: Gill Sans, SFU GillSans;
}
"SFU GillSans" è un tipo di carattere per la lingua vietnamita. Secondo this link, se p contiene un carattere vietnamita che non è nel font Gill Sans, il browser lo cercherà nel font "SFU GillSans".
È possibile passare interamente al secondo carattere, non solo ad alcuni caratteri, se il carattere predefinito manca il carattere ?
Con puro HTML/CSS: no non puoi farlo.
Ma ciò che è possibile fare è determinare quali glifi vengono utilizzati in una stringa, confrontarlo con i glifi disponibili in un font e impostare in modo condizionale un carattere diverso per una sezione o un'intera pagina utilizzando una classe CSS.
Determinare quali glifi vengono utilizzati in una stringa può essere eseguito al volo utilizzando JavaScript o utilizzando qualsiasi linguaggio sul lato server.
Aggiornamento: ho aggiunto un esempio di seguito soprattutto per i vietnamiti.
Il nome e il contenuto di VIETNAMESE_DIACRITIC_CHARACTERS e containsVietnamese possono essere facilmente modificati per corrispondere (un) agli intervalli di caratteri supportati nel font fallback o principale. (metodo di lista bianca o lista nera).
// 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>Risposta breve: no. Questo non è ciò che i CSS possono fare.
I caratteri di fallback significano davvero fallback, non "font che attiva un segnale". Fallback è definito solo in termini di "se il glifo X non è nel carattere A, prova il carattere B (se specificato), poi C, quindi ... finché non troviamo una generica famiglia di caratteri, o nulla, nel qual caso, usa il carattere dell'elemento genitore ".
Se è quello che si utilizzava GillSans di SFU per tutto il testo che contiene anche un singolo carattere vietnamita, perché non usare un font che sembra buono e con supporto Latin-A tramite Latin-D? Ad esempio, potresti utilizzare solo SFU GillSans come carattere principale, non come carattere di fallback. Su una nota CSS: è necessario inserire virgolette attorno a questi nomi. I valori della famiglia di caratteri con caratteri speciali come trattini o spazi devono essere citati as per the CSS spec.
Come viene implementata la tua idea in JS? –
non banalmente. In realtà è un problema incredibilmente difficile perché è necessario script per rilevare il testo, che può essere incredibilmente difficile a causa di singoli blocchi Unicode che appartengono a molti script allo stesso tempo. Questo è il motivo per cui il primo passo è semplicemente trovare un font che abbia tutti i glifi necessari e usarlo come font principale. Fallback è, letteralmente, fallback: quando il font di cui hai bisogno ha un gap inaspettato. –
@ user74158 Ho aggiunto un esempio di codice. Potrebbe essere necessario regolarlo per farlo funzionare nel tuo progetto. Fammi sapere se hai qualche problema a comprenderlo o a regolarlo. – Blaise