缺少字形的CSS字体后备

Question

CSS:

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

"SFU GillSans"是越南语的字体.根据此链接,如果p包含不是Gill Sans字体的越南字符,则浏览器将以"SFU GillSans"字体查找它.

如果默认字体错过任何字符,是否可以完全切换到第二种字体,而不仅仅是某些字符？

Answer 1

使用纯HTML/CSS:不,你不能这样做.

但是你可以做的是确定在字符串中使用哪些字形,将其与字体中可用的字形进行比较,并使用CSS类有条件地为部分或整个页面设置不同的字体.

确定字符串中使用的字形可以使用JavaScript或使用任何服务器端语言即时完成.

更新:我在下面添加了一个例子,尤其是越南语.

的名称和内容VIETNAMESE_DIACRITIC_CHARACTERS,并containsVietnamese可以很容易地改变,以匹配(UN)的支持在您的备用或主要字体字符范围.(白名单或黑名单方法).

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