Question

我的css中定义了很少的自定义字体（英语），我还有其他只需要特定语言页面的字体。如何仅在语言页面上加载这些语言字体。

示例：www.abc.cn或www.abc.jp需要向用户加载语言字体，但当用户输入www.abc.com时，它只会加载英文字体以提高我的网页效果。

Answer 1

尝试getting the current URL并根据域的扩展名添加条件。 e.g：

var url = window.location.href;
console.log("Current URL: " + url);

if(url.includes(".com"))
  console.log("Load English fonts");
else if(url.includes(".cn"))
  console.log("Load Chinese fonts");

Answer 2

您可能拥有特定网站/语言的特定CSS：不仅可以加载一个或其他自定义字体，还可以将它们用于标题，文本等：例如font-family: the-one-for-japanese,sans-serif;和font-family: the-one-for-chinese,sans-serif;。 / p>

我使用Gulp或Grunt和Sass，PostCSS或LESS等自动化工具将它们编译为不同CSS中的_partials 或者至少为每个站点加载1个特定的CSS，然后为所有站点共享1个（@font-face at-rules应该尽快出现，因此加载很快就会开始，但是其他特定的规则有可能被共同覆盖的）。
您还可以在样式元素中的HTML标记中编写@ font-face，然后在常用CSS中编写，然后在第二个特定的CSS中编写它。

OT：根据您需要的具体声明，每种语言的特定CSS可能会也可能不会写入您的通用CSS中。

在html元素<html lang="fr-qc">上设置相关的lang属性（法语在魁北克省，加拿大但<html lang="fr" - 法语，无论是在法国，比利时，瑞士，多哥，塞内加尔，魁北克，法属波利尼西亚，无论在哪里 - 都很好太）。
在CSS中，您会有多个规则，例如[lang|="fr"] .yourclass { font-family: "with-diacritics", sans-serif; background: url(images/fr/bg.jpg); }（使用ja，zh，en，it，nl，dk等）

它不会真正为CSS增加权重，因为它会压缩得特别好。它是由浏览器解析的更多CSS，这不是一个真正的问题，因为它很快（我的意思是你有很多更重要的事情需要优化，比如图像，JS或......你的字体），但它只是更多的字节因为Gzip在服务器上转移！：）

在特定URL上加载自定义字体

2 个答案: