那些遇到过的问题

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

use*_*r26 139 html css fonts

我想在我的网站上使用Google的Roboto字体,我正在关注本教程:

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

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

在此输入图像描述

现在我有三个问题:

  1. 我的media/css/main.css网址中有css .那么我需要将该文件夹放在哪里？
  2. 我是否需要从所有子文件夹中提取所有eot,svg等并放入fonts文件夹？
  3. 我是否需要创建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;
}
Run Code Online (Sandbox Code Playgroud)

我的网址应该是什么样子,如果我想要像dir结构那样:

/media/fonts/roboto

小智 230

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

  • 转到Google的Web Fonts页面
  • 搜索Roboto在搜索框右上方
  • 选择要使用的字体的变体
  • 单击顶部的"选择此字体",然后选择所需的权重和字符集.

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

使用Google的字体可以保证可用性,并减少自己服务器的带宽.

  • -1表示"使用谷歌的字体,这样可以保证可用性".没有任何"保证可用性",更不用说Google字体.我碰巧是十亿多人之一,使用Google的CDN意味着大量的网站无法正常加载,或者根本无法加载.我不是在告诉任何人该做什么,但不要认为谷歌的CDN是一个完美的解决方案. (10认同)
  • @ user26` <link href ='http://fonts.googleapis.com/css？family = Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900'rel ='stylesheet'type =' text/css'>`这只加载一个字体系列的所有样式:Roboto.但是,如果您需要不在Google字体中的字体系列(例如**Roboto Black**),则需要文件夹中的文件并将您在问题中显示的示例代码复制到main.css(就像这样` @ font-face {font-family:'Roboto Black'; src:url('/ media/fonts/roboto/roboto_black_macroman/blablabla.eot; ... etc.`或者像我在答案中建议的那样). (5认同)
  • 很酷的是,他们也为LESS文件提供了@import!然而,测试没有互联网连接或谷歌连接问题(例如:中国)=没有字体...我也注意到没有Roboto Black(Roboto Bk)`font-family`:他们实际上只使用3个字体系列( Roboto,Roboto Condensed和Roboto Slab)所有其他Roboto变体都是通过`font-style`和`font-weight` CSS更改而制作的.理想情况下,在放置Google"<link>"之后检查字体是否真的存在.如果没有,请使用您自己的(btw加载来自一个字体系列的所有文件通常不超过0.5MB). (3认同)
  • -1. 正如@Nateowami 提到的，您依赖 Google 的服务器（可能在某些国家/地区被阻止），这 [不利于隐私](/sf/ask/768431541/ -i-use-google-web-fonts)，如果您自己将字体托管在 CDN 上，性能实际上会更好。这是更多的工作，但那是你的工作，不是吗？ (2认同)

Ash*_*ngh 60

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


  1. Typekit,Fonts.com,Fontdeck等字体托管服务为设计人员提供了一个简单的界面来管理所购买的字体,并生成指向提供字体的动态CSS或JavaScript文件的链接.谷歌甚至提供这项服务免费(这里是您所要求的字体的Roboto的例子).Typekit是唯一提供额外字体提示的服务,以确保字体在浏览器中占据相同的像素.

    像Google和Typekit(即WebFont加载器)使用的JS字体加载器提供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>
    Run Code Online (Sandbox Code Playgroud)


  1. DIY方法涉及获得许可供Web使用的字体,以及(可选)使用FontSquirrel的生成器(或某些软件)等工具来优化其文件大小.然后,使用标准@font-faceCSS属性的跨浏览器实现来启用字体.

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

    /* 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;
}
    Run Code Online (Sandbox Code Playgroud)


长话短说:

使用字体托管服务和@ font-face声明可以在整体性能,兼容性和可用性方面提供最佳输出.

资料来源:http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

UPDATE

Roboto:谷歌的签名字体现在是开源的

您现在可以使用此处的说明手动生成Roboto字体.

roc*_*ady 15

老帖子,我知道.

这也可以使用CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita??lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

  • 您的解决方案是一种性能反模式.与@import相比,在标记中使用链接标记可以更快地下载Google的CSS文件; 浏览器只是更早发现资源引用,特别是由于预加载器(在解析HTML时首先解析HTML,然后发现你的CSS文件,然后下载它,然后解析并发现@import,然后下载导入的样式表). (7认同)
  • 不必要.使用Webpack和插件,这些都将嵌入到您的分发版本中. (3认同)

int*_*ika 13

使用CSS：

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */
Run Code Online (Sandbox Code Playgroud)

与萨斯：

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */
Run Code Online (Sandbox Code Playgroud)

Arm*_*oot 8

在src直接引用的字体文件，因此，如果你把所有的人对/media/fonts/roboto你应该是指他们在您的main.css这样的： src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

在..进入一个文件夹了，这意味着你指的是media文件夹，如果该main.css的是在/media/css文件夹中。

您必须../fonts/roboto/在 CSS 中的所有 url 引用中使用（并确保文件在此文件夹中，而不是在子目录中，例如roboto_black_macroman）。

基本上（回答您的问题）：

我的 media/css/main.css url 中有 css。那么我需要把那个文件夹放在哪里

你可以把它留在那里，但一定要使用 src: url('../fonts/roboto/

我是否需要从所有子文件夹中提取所有 eot、svg 等并放入 fonts 文件夹中

如果您想直接引用这些文件（不将子目录放在 CSS 代码中），那么可以。

我是否需要创建 css 文件 fonts.css 并包含在我的基本模板文件中

不一定，您可以在 main.css 中包含该代码。但将字体与自定义 CSS 分开是一种很好的做法。

这是我使用的字体 LESS/CSS 文件的示例：

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}
Run Code Online (Sandbox Code Playgroud)

（在这个例子中，我只使用了 ttf）然后我@import "fonts";在我的 main.less 文件中使用（less 是一个 CSS 预处理器，它使这样的事情更容易一些）

小智 5

对于网站，您可以使用“Roboto”字体，如下所示：

如果您创建了单独的 css 文件，则在 css 文件顶部放置以下行：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
Run Code Online (Sandbox Code Playgroud)

或者，如果您不想创建单独的文件，则在中间添加上一行<style>...</style>：

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>
Run Code Online (Sandbox Code Playgroud)

然后：

html, body {
    font-family: 'Roboto', sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

416307 次

最近记录：

5 年，11 月 前
如果我使用Google网络字体,Google可以跟踪我吗？ 14
更多相关链接
相关归档
如何强制表格单元格<td>包装？ 142
如何在不允许多项选择的情况下在HTML中创建列表框？ 97
将按钮组的宽度设置为100%并使按钮宽度相等？ 69
离子:如何使div居中？ 39
Next.js 图像 - 如何保持宽高比并在需要时添加信箱 31
Bootstrap列浮动问题.DIVS需要相同的高度 20
在不重新加载页面的情况下更改URL 18
有没有办法更改您的应用程序的默认字体 8
如何显示Sindhi Language字体？ 8
在IntelliJ的选择字体对话框中没有出现字体 4
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
如何将新的本地分支推送到远程Git存储库并跟踪它？ 4154
在JavaScript中创建多行字符串 2412
查找当前目录和文件的目录 2007
JavaScript等效于printf/String.Format 1874
确定对象的类型？ 1700
在Vim中复制整行 1555
如何显示JavaScript对象？ 1520
每个'循环的Java'如何工作？ 1446
如何将包含文件的文件夹复制到Unix/Linux中的另一个文件夹？ 1145