javascript - 是否可以对同一元素使用 2 种不同的字体，一种用于英语，另一种用于泰米尔语(unicode)

Question

我想对泰米尔语文本使用“Arial Unicode MS”，对英语文本使用“Open Sans”。 但两者都在同一行，而不是单独的元素。

ORGANIC Marachekku Gingelly Oil 500 ml (மரச்செக்கு நல்லெண்ணெய்)

现在，在此行中，英语应为“open sans”，泰米尔语(外语)应为“Arial Unicode MS”

如何在 CSS 中实现这一点？我需要使用JS吗？是这样如何？

Answer 1

当然可以。

你认为that emoji 😱真的是用于呈现该 元素文本的 Consolas 或 Menlo 字体系列的一部分吗？事实并非如此。

这里发生的情况是，浏览器将一路遍历定义的字体系列，直到找到一个声明它能够处理该字形的字体。如果不能，那么它将搜索操作系统定义的所有字体列表。

因此，在 元素的 StackOverflow 情况下，我们有

Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif

在我的系统(macOS)上，这些都不能代表字形“😱”，因此它会退回到系统字体(Apple Color Emoji)。这意味着 元素确实有两种不同的字体用于其唯一的文本节点: Menlo for that emoji部分和“😱”的系统字体。

<小时/> <小时/>

就您而言，由于“Open Sans”字体仅支持标准 ISO Latin 1、Latin CE、希腊语和西里尔字符集，您只需执行以下操作

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
  font-family: "Open Sans", "Arial Unicode MS", sans-serif;
}

<span>ORGANIC Marachekku Gingelly Oil 500 ml (மரச்செக்கு நல்லெண்ணெய்)</span>

泰米尔语部分将很高兴地回退到可用的Arial Unicode MS。 (顺便说一句，您可能想为未安装该字体的系统声明其他后备字体)。

<小时/>

现在，也可能存在这样的情况:人们想要使用一种确实支持大量字符集但仅支持少数字形的字体。
对于这种情况，您可以使用 unicode-range @font-face的属性(property)声明。

@font-face {
  font-family: 'sans-serif-vowels';
  src: local('Arial'), local("Helvetica Neue"), local("Helvetica");
  unicode-range: U+61, U+65, U+69, U+6f, U+75, U+41, U+45, U+49, U+4f, U+55;
}

body{
  font-family: sans-serif-vowels, cursive;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan ante a consectetur volutpat. Donec venenatis tristique gravida. Morbi ultricies congue justo, sed condimentum neque elementum sit amet. Duis in nisl ultricies turpis gravida vestibulum. Aliquam commodo velit in neque convallis posuere quis hendrerit libero. Nullam tempor, mauris at posuere convallis, leo ante pharetra erat, eget accumsan quam sem eu erat.