动态生成文本的CSS字体适配：拉丁斜体与阿拉伯正常体

核心思路 #

利用CSS的unicode-range属性，分别针对拉丁字符和阿拉伯字符指定对应的字体样式，无需修改动态生成的<p>标签内容。

实现代码 #

方法1：通过@font-face精准控制字体范围

/* 声明阿拉伯字体，仅作用于阿拉伯字符区间 */
@font-face {
  font-family: "Athelas-Arabic";
  src: url("path-to-athelas-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  font-style: normal;
}

/* 声明拉丁字体的斜体版本，仅作用于拉丁字符区间 */
@font-face {
  font-family: "Arno-Pro-Italic";
  src: url("path-to-arno-pro-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: italic;
}

/* 给p标签应用组合字体 */
p {
  font-family: "Arno-Pro-Italic", "Athelas-Arabic", serif;
}

方法2：简化版（复用现有字体声明）

如果已经通过Typekit加载了字体，可直接针对字符范围调整样式：

p {
  font-family: "Arno-Pro", "Athelas-Arabic", serif;
  font-style: normal;
}

/* 仅对拉丁字符应用斜体 */
@font-face {
  font-family: "Arno-Pro";
  src: local("Arno Pro Italic"); /* 或使用Typekit提供的字体源 */
  font-style: italic;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

关键说明 #

• unicode-range划分了字符区间：阿拉伯字符集中在U+0600-U+06FF及扩展区间，拉丁字符覆盖基础拉丁和常用扩展范围。
• 这样设置后，拉丁文本会自动调用Arno Pro的斜体样式，阿拉伯文本则使用Athelas Arabic的正常样式，不会出现系统字体回退的问题。
• 注意替换代码中的字体文件路径为Typekit提供的实际资源路径，或确保local()能正确识别已加载的字体。

内容的提问来源于stack exchange，提问作者Barnabas