我可以在同一段落中为亚洲字符（韩文）使用两种不同的字体，为罗马字符使用另一种字体吗？答案

【问题标题】：Can I use two different typefaces for Asian characters (korean) and another for roman characters in the same paragraph?我可以在同一段落中为亚洲字符（韩文）使用两种不同的字体，为罗马字符使用另一种字体吗？
【发布时间】：2017-03-10 06:35:33
【问题描述】：

问题是我们是否有一个包含韩文（韩文）字符和罗马字符的段落。 CSS中有没有办法让韩文字符成为某种字体，而罗马字符使用另一种字体？

例如，我想将 Noto Sans KR 用于 Hangul 和 Helvetica 用于罗马字符。这个 CSS 看起来如何？

中文和日文有类似的功能吗？

编辑：文本由罗马字母/单词和韩语（韩语）交织而成。所以把它们分开是行不通的。

【问题讨论】：

标签： html css fonts typography

【解决方案1】：

与任何其他内容相同：使用具有逻辑后备顺序的 CSS 字体系列。确保首先列出罗马字体，这不适用于韩文，然后再列出韩文字体，这样它们就会在同一个文本块中加入韩文：

@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css); 

p {/*
    Order matters: roman first, which doesn't have hangul support, and
    so will kick in for the English text, but will fall through to the
    next font when there are "letters" that don't exist in the font.
    Then you follow up with a Korean typeface, and now you have a
    font stack for styling the two scripts in their respective typefaces.
  */
  font-family: Times, 'Jeju Myeongjo', serif;
}
p:nth-child(2) { font-family: Times, serif; }
p:nth-child(3) { font-family: 'Jeju Myeongjo', serif; }

<p>This is a paragraph with 한국어, also known as 조선말.</p>
<p>This is a paragraph with 한국어, also known as 조선말 (purely Times).</p>
<p>This is a paragraph with 한국어, also known as 조선말 (purely Jeju Myeongjo).</p>

如您所见，带有字体回退的段落使用罗马字体呈现英文部分，使用韩文字体呈现韩文部分。

（为了更清楚一点，第二段只使用 Times - 你可以看到韩文不匹配混合家庭段落。第二个只使用 Jeju Myeongjo，并且在那段中英文不匹配混合家庭段）。

【讨论】：

嗨，迈克，谢谢。我有时间玩。这假设您的第一个字体没有“支持”韩文字符？我试图用 Helvetica 复制它，看起来它试图应用韩文 Helvetica 字符而不是“Noto Sans KR”行中的下一个字体
很确定这就是我在这个答案中所说的，但确实：这是因为罗马字体不支持 CJKV，所以当文本包含韩语时，无法应用该字体，并且 CSS 引擎尝试列表中的下一个字体。如果您使用已经具有韩语覆盖范围的字体作为第一个字体，那是行不通的。值得庆幸的是，Helvetica 有很多替代品。（Open Sans、Sans Sans Pro 等）

【解决方案2】：

实现这一点的最简单方法可能是在段落的不同部分周围添加<span> 标签：

<p>
  <span class="korean-font">...</span>
  <span class="roman-font">...</span>
</p>

然后，CSS 需要为每个字体指定字体系列。

.korean-font {
  font-family: "Noto Sans", "Noto Sans CJK KR", sans-serif;
}

.roman-font {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
}

【讨论】：

做不到这一点有没有更动态的方法来检测和完成这个？理想情况下，我们不希望编辑器添加 span HTML 标签来执行此操作
是的：只要您正确订购字体后备，CSS 已经免费提供此功能。无需在 div 或 span 中显式包装内容。