如何根据文本语言设置不同的字体系列?

时间:2018-06-09 作者:Shriram

我用WordPress开发了一个报纸门户。我正在使用Two languages in this portal Tamil(site language) and English.

现在我正在使用Nova Sans Tamil font for Tamil language fontRoboto font For English

在标题和菜单中,我可以使用css轻松地处理这个问题,但在内容主体中,我无法做到这一点,因为it is collaboration of two language fonts used in the site.

所以英文字体看起来不太好。

是否有任何JavaScript、CSS或其他方法可以基于文本语言设置不同的字体系列?

My need is

If the text is Tamil font then set Nova Sans Tamil
If the text is English font then set Roboto

(注意):我不能对英文字体使用不同的类,所以不要给出这个解决方案。因为我在数千个地方使用英文字体,所以很难更改。

3 个回复
SO网友:cjbj

这个问题不是关于WordPress,而是关于css。实际上,甚至还有一个简单的解决方案,因为css-3有一个名为unicode-range, 它允许您根据字符集加载字体。对于Tamil the unicode block 是U+0B02。。U+0BCD。因此,如果您以英语字体为标准,您可以在任何适当的时候轻松地将字体更改为泰米尔语,如下所示:

@font-face {   
  font-family: \'NovaSansTamil\';
  src: url(\'novasanstamil.woff\') format(\'woff\'); /* full url to font needed */
  unicode-range: U+0B02-CD;
  }
小心点browser support is not yet universal 对于此功能。

SO网友:Ovidiu

无论您使用哪种语言切换解决方案,我确信它都会使用该语言设置一个元标记(请参见案例1),或者在html或body标记中添加一个类(请参见案例2)。

Case 1

如果您有一个meta或任何其他可识别的标记来保存语言值,但它不是内容的包装器,只需添加一个javascript代码来监视该标记上的更改,并根据meta或任何标记的值向主体添加一个类。

基于元标记的示例:

<meta name="language" content="english">

JS代码:

jQuery(document).ready(function(){
    let newLang = jQuery(\'meta[name="language"]\').attr(\'content\');
    jQuery(\'body\').removeClass(\'otherlanguage english\').addClass(newLang); \\\\i am removing both language classes to make sure they are not added twice
});
现在检查案例2,因为下一步就是这个步骤。

Case 2

然后在CSS中,只需将目标

body.english p {
    font-family: whatever;
}

SO网友:mb0742

如果将来有人遇到这个问题,最简单的方法(我已经找到)就是抓取文本元素,使用regex识别字符集,然后根据需要添加元素类。

var textElements = document.querySelectorAll(".content");
for (var i = 0; i < textElements.length; i++) {
    if (textElements[i].innerHTML.match(/[\\u0B80-\\u0BFF]/)) {
        textElements[i].className += " tamil";
    }
}

.content {
    font-family: "Nova Sans";
}
.tamil {
    font-family: whatever;
}
http://kourge.net/projects/regexp-unicode-block (选择与语言相关的块范围)。

结束

相关推荐

WordPress style le.css未更新,仅在重新加载主题后

我正在使用Bootstrap来组装Wordpress。我在本地更新所有文件,并通过Sublime的SFTP上传它们。我还使用Cyberduck来再次检查更改是否已全部完成。一切都进行得很顺利,我可以轻松地更改文件,并通过简单的刷新看到它们的更新。但说到风格。css文件,更新是一件很糟糕的事。我对文件进行了更改,并将其上载,但在重新加载时未看到任何更改。要查看更改,我必须重新加载主题,然后进行更改,通过SFTP上载更改的文件并重新加载。然而,在刷新不再工作之前,我只能这样做一次。在我的标题中。php I加载