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



我想用"Arial Unicode MS"表示泰米尔文字,用"Open Sans"表示英语。但两者都在同一条线上,而不是一个单独的元素。

有机马拉切库姜饼油500毫升(மரச்செக்கு நல்லெண்ணெய்)

现在,英语应该是"open sans",泰米尔语(外语)应该是"Arial Unicode MS">

如何在CSS中实现这一点?我应该使用JS吗?是这样吗?

当然可以。

你认为that emoji真的是Consolas或Menlo字体家族的一部分吗;代码>元素的文本?事实并非如此。

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

因此,在<代码>元素我们有

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

在我的系统(maco)上,这些都不能表示字形",所以它又回到了系统字体(Apple Color表情符号)。这意味着<code>元素确实有两种不同的字体用于其唯一的textNode:用于that emoji部分的Menlo和用于"的系统字体。



在您的情况下,由于"Open Sans"字体只支持标准的ISO拉丁1、拉丁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。(顺便说一句,您可能需要为没有安装它的系统声明其他后备字体)。


现在,也可能有人想使用一种支持大量字符集但只支持少数字形的字体
对于这种情况,可以使用@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.

最新更新