如何在更少的CSS中使用Google字体？

Question

我正在寻找一种解决方案，以将Google字体或任何其他自定义字体嵌入到Less CSS中。

如何嵌入给定的字体？

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,600italic,700,700italic,900,900italic,400italic' rel='stylesheet' type='text/css'>

Answer 1

尝试：

@import (css) url(...)

将导入语句原样保留在顶部。

Answer 2

我只会在CSS文件的顶部使用@import命令，然后您可以简单地通过在字体的末尾添加管道并输入所需其他字体的名称来添加新字体。要使用它们，只需使用CSS font-family style命令：

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);
span {
  font-family: 'Playfair Display SC', serif;
}

HTML

<span> This is an example text. </span>

希望这有所帮助！

Answer 3

[创建文件，例如-Google-fonts.css]

在其中添加您的内容

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);

在.less文件中添加：

@import (inline) "google-fonts.css";

并且样式表中有Google字体

Answer 4

在弹出框中（选择Google网络字体之后：]

1. 单击“ @Import”标签（而不是“ Standard”）以获取完整的URL
2. 复制网址
3. 将其粘贴到LESS文件的顶部
4. 将字体系列名称更新为导入的字体名称
5. 保存文件。 LESS将使用新字体重新编译

Answer 5

我不确定我是否理解这个问题。您“用更少的字体嵌入”是什么意思？

无论如何，您通常通过3种方式使用网络字体：

• 参考某些标准字体（例如Arial或Sans Serif），或
• 包括您网站上字体文件的副本（ttf，eot，woff，svg等），或
• 来自CDN的参考字体文件（例如Google）。

要定义字体，您需要在标准CSS中指定其参数（有关示例，请参见Quinn Rohlf的A Better @font-face Kit for Open Sans [在示例中使用本地字体]）。如果您使用Google字体，则Google会为您提供用于在网站中定义字体的代码（Adobe也是如此）。无需为此使用LESS。

一旦设置了字体定义，现在就可以在LESS文件中引用字体系列。 LESS和自定义字体之间的唯一交集是允许您通过LESS变量使用字体系列（和其他字体设置），但是它假定字体已经定义，并且实际的字体CSS定义必须指向本地字体文件或CDN。 。

Answer 6

两种方法：

1. 在应用程序文件夹中创建一个文件，并将其命名为（例如）“ googlefonts.css”。使用提到的url上可用的代码更新此css文件。最后使用@import“ ./app-folder/googlefonts.css”以您的styles.less（或任何样式代码）导入此googlefonts.css。

2. 如上文@rodrigo calix所述；在googlefonts.css文件中提及@import url（'https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap'）;然后使用@import“ ./app-folder/googlefonts.css”

以样式代码导入googlefonts.css