是否可以为同一元素使用 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 字体系列的一部分吗？不是。 这里发生的是浏览器将遍历定义的字体系列，直到找到一个声明它能够处理该字形的字体系列。如果不能，那么它将搜索 OS 定义字体的所有列表。 所以在 <code> 元素的 Whosebug 案例中我们有 <pre><code>Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif

在我的系统 (macOs) 上 none 这些可以表示字形“”，因此它会退回到系统字体（Apple Color Emoji）。这意味着 元素确实有两种不同的字体用于其唯一的文本节点：<code>that emoji 部分的 Menlo 和 "".

的系统字体

对于您的情况，由于 "Open Sans" 字体仅支持标准 ISO Latin 1、Latin CE、Greek 和 Cyrillic 字符集，您可以简单地执行

@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。（顺便说一句，您可能想为没有安装它的系统声明另一种后备字体）。

现在，可能还会出现这样的情况，即人们想要使用一种确实支持很多字符集但只支持少数字形的字体。
对于这种情况，您可以使用 @font-face 声明的 unicode-range 属性。

@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.

是否可以为同一元素使用 2 种不同的字体，一种用于英语，另一种用于泰米尔语（unicode）

Is it possible to use 2 different font for same element, 1 for English & another for Tamil(unicode)

javascript

css

unicode

fonts

google-fonts