如何为两种不同字体的文字添加不同大小

Question

如何为不同字体添加不同大小？

这是我的正文CSS代码：

body {
  direction: rtl;
  font-family: Roboto, Droid Arabic Kufi;
}

使用Roboto字体来显示英文单词，使用Droid Arabic Kufi字体来显示阿拉伯语单词。如果单词是英文（Roboto），则字号为13像素，如果是阿拉伯语（Droid Arabic Kufi），则字号为12像素。

- user7336361

Answer 1

为什么不创建一个英文和阿拉伯语课程，包括每个font-family和font-size：

.english {
    direction: ltr;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}
.arabic {
    direction: rtl;
    font-family: 'Droid Arabic Kufi', sans-serif;
    font-size: 12px;
}

然后，根据它所属的语言，将其分配给html元素：

<span class="english">english text 13px font size</span>
<span class="arabic">arabic text 12px font size</span>

完整代码示例（使用 Droid Sans 作为演示而不是 Droid Arabic Kufi）：

.english {
  direction: ltr;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
}
.arabic {
  direction: rtl;
  font-family: 'Droid Sans', sans-serif;
  font-size: 12px;
}

<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Roboto" rel="stylesheet">
<span class="english">english text 13px font size</span><br>
<span class="arabic">arabic text 12px font size</span>

- Syden

Answer 2

为此，您需要将字体分别分配为单独选择的元素的字体。我建议使用类，一个用于英文，一个用于阿拉伯语单词。假设您有一个类.english和一个类.arabic。然后，您可以设置以下样式：

.english {
  direction: ltr;
  font-family: Roboto;
  font-size: 13px;
}

.arabic {
  direction: rtl;
  font-family: Droid Arabic Kufi;
  font-size: 12px;
}

如果不使用类或其他唯一标识元素所包含的语言，就无法完成这个功能。

- Ananth Rao