如何在较少的CSS中使用谷歌字体？嵌入式自定义字体的任何其他解决方案更少？

4 回答

• 11

  尝试：

  @import (css) url(...)
  

  保持导入语句按原样排在最前面 .

  回复于 2024-05-05T00:45:45+08:00
• 3

  我只是在我的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>
  

  希望这有帮助！

  回复于 2024-05-05T00:45:45+08:00
• 4

  创建一个文件，例如google-fonts.css`

  在里面添加你的内容

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

  在 .less 文件中添加：

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

  并且你的样式表中有你的谷歌字体

  回复于 2024-05-05T00:45:45+08:00
• 0

  我不确定我理解这个问题 . “少量嵌入[...]字体”是什么意思？

  无论如何，您通常以3种方式使用Web字体：

  • 参考一些标准字体（如Arial或Sans Serif），或

  • 在您的网站上包含字体文件（ttf，eot，woff，svg等）的副本，或者

  • 参考CDN的字体文件（例如Google） .

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

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

  回复于 2024-05-05T00:45:45+08:00