6

CSS:

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

"SFU GillSans" is a font for Vietnamese language. According to this link, if p contains a Vietnamese character that is not in Gill Sans font, then the browser will look for it in "SFU GillSans" font.

Is it possible to switch to second font entirely, not only some characters, if the default font misses any character?

Community
  • 1
  • 1
hans-t
  • 3,093
  • 8
  • 33
  • 39

3 Answers3

6

With pure HTML/CSS: no you cannot do that.

But what you can do is determine which glyphs are being used in a string, compare that to the glyphs being available in a font, and conditionally set a different font for a section or entire page using a CSS class.

Determining which glyphs are used in a string can be done on-the-fly using JavaScript, or using any server-side language.

Update: I added an example below especially for Vietnamese.

The name and contents of VIETNAMESE_DIACRITIC_CHARACTERS and containsVietnamese can easily be changed to match (un)supported character ranges in your fallback or main font. (whitelist or blacklist approach).

// 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>
Blaise
  • 13,139
  • 9
  • 69
  • 97
  • 1
    How is your idea implemented in JS? – hans-t Jun 06 '15 at 01:37
  • non-trivially. It's actually a ridiculously hard problem because you need to script detect the text, which can be incredibly hard due to single Unicode blocks belonging to many scripts at the same time. This is why step one is to simply find a font that has all the glyphs you need, and use that as main font. Fallback is for, literally, fallback: when the font you need has an unexpected gap. – Mike 'Pomax' Kamermans Jun 06 '15 at 05:06
  • @user74158 I added a code example. You may need to adjust it to make it work in your project. Let me know if you have any trouble understanding or adjusting it. – Blaise Jun 06 '15 at 07:14
1

Short answer: no. That's not what CSS can do.

Fallback fonts really do mean fallback, not "font switching on some signal". Fallback is only defined in terms of "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".

If that's what you SFU GillSans used for all text that has even a single vietnamese character in it, why not just use a font that looks good and has Latin-A through Latin-D support? You could, for instance, just use SFU GillSans as your main font, not as fallback font. On a CSS note: you need to put quotes around those names. Font-family values with special characters like dashes or spaces need to be quoted as per the CSS spec.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
1

Yes, we can! If you know beforehand the unsupported glyphs/ranges you can use unicode-range. My answer is shamefully copied from this answer. If it helps you feel free to vote that answer up.

Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

BTW, more info about this from http://24ways.org/2011/unicode-range

Live example: 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>​
Mihai
  • 438
  • 3
  • 13