CSS 缺少字形的字体回退

Question

CSS:

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

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

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

Answer 1

纯HTML/CSS：不，你不能那样做。

但是您可以做的是确定字符串中使用了哪些字形，将其与字体中可用的字形进行比较，然后使用 [=33= 有条件地为部分或整个页面设置不同的字体] class.

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

更新：我在下面添加了一个特别针对越南语的示例。

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

// From 
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 能做的。

后备字体确实意味着后备，而不是 "font switching on some signal"。回退仅根据 "if glyph X is not in font A, try font B (if specified), then C, then ... until we find a generic font-family, or nothing, in which case, use the parent element's font".

定义

如果这就是您 SFU GillSans 用于所有甚至包含单个越南字符的文本的方式，为什么不使用看起来不错并且支持 Latin-A 到 Latin-D 的字体呢？例如，您可以只使用 SFU GillSans 作为您的主要字体，而不是作为后备字体。 CSS 注意：您需要在这些名称周围加上引号。带有破折号或空格等特殊字符的字体系列值需要用引号引起来 as per the CSS spec.

Answer 3

是的，我们可以！如果您事先知道不受支持的 glyphs/ranges，则可以使用 unicode-range。我的回答是可耻地从 this answer. If it helps you feel free to vote that answer up.

复制过来的

是的，你可以，使用一种叫做 unicode-range 的东西它适用于所有现代网络浏览器：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

顺便说一句，更多信息来自 http://24ways.org/2011/unicode-range

实例：http://jsfiddle.net/jfcox/3LQyr/

<style>
@font-face {
    font-family: Foobar;
    src: local('Times New Roman');
    unicode-range: U+61-6E;
}
@font-face {
    font-family: Foobar;
    src: local('Arial');
    unicode-range: U+6F-7A;
}
body{
  font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>

CSS 缺少字形的字体回退

CSS Font Fallback for Missing Glyphs

css

browser

fonts