如何在一个段落中为 2 种语言设置不同的字体系列答案

【问题标题】：How to set different font-family for 2 language in one paragraph如何在一个段落中为 2 种语言设置不同的字体系列
【发布时间】：2017-12-11 22:06:29
【问题描述】：

我的 html (wordpress) 中有一个文本内容，其中包含 2 种语言 - 希伯来语和英语。我试图在文本中找到，只是英文字符串，并为主题提供不同的字体系列。我不想为每个字符串使用内联样式。我需要使用正则表达式或其他东西，在我的“p”标签中找到那些字符串，并为主题提供我想要的特定字体。我该怎么做？

【问题讨论】：

Using separate fonts for two different languages的可能重复
将您的内容示例添加到您的问题中，以及所需的输出以及您迄今为止尝试过的内容。
示例：ibb.co/dcmejb

标签： javascript jquery html css wordpress

【解决方案1】：

我遇到了类似的问题。我发现我需要我的应用程序来交付任何和所有希伯来语（以及许多其他语言，就此而言）以及一些关键部分。

<p> Your english here, <span lang="he" dir="rtl">your hebrew here</span></p>

必须有这些额外的部分给了我我的 css 的选择器

*[lang='he'] {
  font-family: yourFont;
}

如果你想把事情做好，这可能是不使用非常复杂的 javascript 的唯一方法。

【讨论】：

它没有解决我的问题，因为当浏览器使用“he”语言时，[lang='he'] 会更改字体系列。就我而言，我需要更改字体系列而不是加深浏览器语言..只需找到字符串并为其更改字体。
我不确定我是否理解。我说的是为每个元素设置语言，而不是整个文档。（当然，您应该设置默认值。）这在我的网站（语言测试网站）上有效，但它可能有我不知道的限制。对不起！祝你好运。

【解决方案2】：

将一种语言包装在 <span> 中并对其应用 css 类会很好地工作，并且您不需要使用内联 css 样式。

.french{
  font-size:14px;
  font-weight: 500;
  color:red;
  font-family: Arial, Helvetica, sans-serif;
}

&lt;p&gt;&lt;span class="french"&gt;Ceci est un exemple.&lt;/span&gt; this is is an example. &lt;span class="french"&gt;Ceci est un exemple.&lt;/span&gt;&lt;/p&gt;

【讨论】：

我不想在 span 中包含任何字符串。我需要使用正则表达式或其他东西在文本中找到字符串，并为此更改字体。

【解决方案3】：

以下是您如何在伪代码中执行此操作的基本流程：

遍历字符串并根据/[a-zA-Z]+/g 测试每个字符，如果有匹配项，您知道该字符是英文
当你找到一个匹配存储索引时
从存储的索引开始循环遍历剩余的字符，直到找到正则表达式计算结果为假的字符并存储该索引
现在你有了字符串的开始和结束索引，你需要用一个具有“englishText”类的跨度来包装它们，例如：

var newText = yourText.slice(0, beginIndex) + '<span class="englishText>" + yourText.slice(beginIndex, endIndex) + "</span>" + yourText.slice(endIndex);
将原始文本元素的内部 HTML 设置为 newText

这应该适用于只有一次英文文本出现的基本情况，如果出现不止一次，您需要将开始和结束索引存储在数组中并使用它们构建字符串。

【讨论】：

嗨。我使用这种方式，这是我现在的代码： $("p:contains('" + newText + "')").html(function(_, html) { return html.replace(newText , '$1') }); // newText 是我的字符串变量，但替换功能不起作用。我错过了什么？
您的正则表达式在哪里找到存储在 $1 中的匹配项？