Question

CSS：

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

"SFU GillSans"是越南语的字体。根据{{3}}，如果p包含不在Gill Sans字体中的越南字符，则浏览器将以"SFU GillSans"字体查找。

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

Answer 1

使用纯HTML / CSS：不，你不能这样做。

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

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

更新：我在下面添加了一个例子，尤其是越南语。

VIETNAMESE_DIACRITIC_CHARACTERS和containsVietnamese的名称和内容可以轻松更改为匹配（联合国）支持的后备或主要字体中的字符范围。（白名单或黑名单方法）。

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

简答：不。这不是CSS可以做的事情。

后备字体确实意味着后退，而不是“某些信号上的字体切换”。后退只定义为“如果字形X不是字体A，尝试字体B（如果指定），然后是C，那么......直到我们找到通用字体系列，或者什么也没有，在这种情况下，使用父元素的字体“。

如果这是SFU GillSans用于所有文本中甚至包含单个越南字符的内容，那么为什么不使用看起来不错且具有Latin-A到Latin-D支持的字体呢？例如，您可以使用SFU GillSans作为主要字体，而不是后备字体。在CSS注意事项：您需要在这些名称周围加上引号。带有特殊字符（如短划线或空格）的字体系列值需要引用as per the CSS spec。

缺少字形的CSS字体后备

2 个答案: