新手上路，请多包涵

我想在我的网站上使用 Google 的 Roboto 字体，我正在按照本教程进行操作：

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

我已经下载了具有如下文件夹结构的文件：

在此处输入图像描述

现在我有三个问题：

我的 media/css/main.css url 中有 css。那么我需要把那个文件夹放在哪里呢？
我是否需要从所有子文件夹中提取所有 eot、svg 等并放入 fonts 文件夹？
我是否需要创建 css 文件 fonts.css 并将其包含在我的基本模板文件中？

他用这个的例子

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
    font-weight: 200;
    font-style: italic;
}

如果我想要这样的目录结构，我的 url 应该是什么样的：

/media/fonts/roboto

原文由 user26 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css fonts

阅读 1.3k

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

你真的不需要做任何这些。

转到 Google 的网络字体页面
在右上角的搜索框中搜索 Roboto
选择您要使用的字体变体
单击顶部的“选择此字体”，然后选择所需的粗细和字符集。

该页面将为您提供 <link> 要包含在您的页面中的元素，以及要在您的 CSS 中使用的示例 font-family 规则列表。

以这种方式使用 Google 的字体可以保证可用性，并减少您自己服务器的带宽。

原文由 user1864610 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-15

您可以采用 两种方法 在您的页面上使用许可的网络字体：

1. Typekit、Fonts.com、Fontdeck 等字体托管服务。

这些服务为设计人员提供了一个简单的界面来管理购买的字体，并生成指向提供字体的动态 CSS 或 JavaScript 文件的链接。 Google 甚至免费提供这项服务（这里是您请求的 Roboto 字体的示例）。

JS 字体加载器，如 Google 和 Typekit 使用的字体加载器（即 WebFont 加载器）提供 CSS 类和回调，以帮助管理可能发生的 FOUT ，或下载字体时的响应超时。

 <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

2. DIY方法

这涉及获得一种字体许可用于 Web，以及（可选）使用像 FontSquirrel 的生成器（或某些软件）这样的工具来优化其文件大小。然后，标准 @font-face CSS 属性的跨浏览器实现用于启用字体。

这种方法可以提供更好的加载性能，因为您可以更精细地控制要包含的字符，从而控制文件大小。

 /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

TLDR;

在您的网站上嵌入自定义字体有两种主要方法。使用字体托管服务和 @font-face 声明可以在整体性能、兼容性和可用性方面提供最佳输出。

来源： https ://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/（链接失效）

更新

Roboto：Google 的签名字体现已开源。您现在可以使用此处的说明手动生成 Roboto 字体。

原文由 Ashesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何在网站上使用 Google 的 Roboto 字体？

1. Typekit、Fonts.com、Fontdeck 等字体托管服务。

2. DIY方法

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

Stack Overflow 翻译