不使用HTML lang标签如何为不同语言更改字体和字号

Question

因此，我有一些帖子，在其中使用两种不同的语言（英语和韩语）：类似于：

This is an example (예시).

我经常在这两种语言之间切换。

我想使用不同字体和字体大小。

通常，我会使用lang(en)和lang(ko)指定不同的CSS块，但这变得很烦人，因为这需要编写我的HTML内容行如下所示：

<p lang="en">This is an example (<span lang="ko">예시</span>)</p>

我希望尽量减少指定HTML标签的次数，因为我经常混用这两种语言，并计划使用Markdown来编写我的文章。

我知道在CSS的font-family中，如果高优先级字体集没有提供特定的语言支持，它会自动寻找下一个字体集，因此我可以这样做：

body { font-family: "Some Only English Font", "Some Korean Font" }

如果第一个字体不支持韩语，那么这个技巧可以更改字体。也许有什么方法可以利用这个属性来为不同的语言更改字体大小？

当然，任何其他方法都会有所帮助。

（也许可以使用JS来检测字体，并且仅在使用"Some Korean Font"时更改字体大小吗？）

- Sanha Cheong

Answer 1

我认为寻找检测语言的JS方法（尽管很复杂）会给您的页面增加不必要的开销：我建议您提前解决此问题。

为什么不像这样在文本编辑器中编写您的帖子呢？

这是一个示例（@@@예시@@@）。

然后只需将@@@替换为<span lang="ko">，将@@替换为</span>，并开始使用Markdown正常工作。

根据您的内容，也许您可以找到更快速的字符组合来识别韩文：

这是一个示例（%%예시%）。

选择任何独特且输入快速的字符组合即可。

如果您每周发布一篇帖子，可以手动执行（查找和替换），如果您经常发布帖子，则可以通过自动脚本来完成。实际上，您可以创建一个任务，当某个目录中的文件更改时触发该脚本。

- David

---

明智的解决方案是，在呈现页面时逐行解析文本会增加不必要的开销。 - Master Yoda

@MasterYoda。我真的这么认为。在解析之后，将会有一个（最好的情况下）巨大的DOM更新。此外，我不喜欢用JS改变语义。 - David

Answer 2

HTML5新增了一个属性，名为

data

<tagHTML id="myid" data-var_name="value" data-lang="en" ...> 

你可以添加很多 data-lang="en" ... 结果是你得到了一个 数据集，你可以得到一个 作为数组的列表 并且可以简单地像这样访问：

var article = document.getElementById('myid');

article.dataset.var_name// "value"
article.dataset.lang // "en"
..

- user8556290

---

是的，但这仍然需要在内容中明确声明语言变量，对吧？我正在寻找一种自动执行而无需指定它的方法。 - Sanha Cheong

你可以指定你想要的，只需替换getElementById并使用querySelector来针对一个样式，或者使用querySelectorAll来同时针对多个样式。 - user8556290

Answer 3

根据您的要求，我建议在预处理器方法中设置韩文文本并添加您的字体族和字号跨度。例如：$。

$(function() {
  detectKoreanAndAddSpans();
});

- ControlAltDel

---

有没有办法逐字（或至少逐词）检测字体？我在同一行/句子中不断切换语言。 - Sanha Cheong

我建议当您检测到韩文字符时，通过编程方式添加跨度以设置字体系列和字体大小。我并不建议您搜索特定的字体。 - ControlAltDel

是的，我明白了那部分，但我想知道如何进行检测部分（而不必手动检测元素或其“lang”变量设置）。 - Sanha Cheong

@SanhaCheong 最好的方法可能是创建一个正则表达式，类似于[a-zA-Z]+，但使用您的韩文字符。然后递归地在所有元素或文档文本上运行matches，然后从偏移量计算元素。实际上，您可以像这样做：element.innerHTML = nonKoreanPart + "<span class=..." + KoreanPart + " </span>" + endingNonKoreanPart。 - ControlAltDel