/* You can add global styles to this file,and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Roboto');

// Set Global Font
body {
  font-family: 'Roboto',sans-serif;
  margin: 0;
}

但是,似乎字体默认为sans-serif而不是Roboto.我尝试在index.html中添加一个链接,效果相同.

附：不确定是否相关,但我也添加了材料图标

// Import Material Icons
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),local('MaterialIcons-Regular'),url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}

在同一个文件中,这可能会对项目产生影响吗？

通过npm安装roboto-fontface并将其链接到angular-cli.json的styles数组中

npm install roboto-fontface --save

在angular-cli.json样式数组’apps [0] .styles’中添加以下内容

"styles": [
      ...
      "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
      ...
    ]

并且,npm开始并尝试样式

这意味着当您打开http://fonts.googleapis.com/css?family=Racing+Sans+One时,它将显示仅适用于您当前浏览器的内容

所以我不能只是抓住它并使用我自己的font-face,如果我想让它在所有浏览器中工作.许多人这样做,不知道它会无处不在

获取字体的所有变体的方法是什么？ woff2 / WOFF / TTF /等？ (用作font-face中的后备)

我刚尝试在Chrome中打开api页面,在Developer中更改浏览器useragent欺骗,并完成各种变化.我看到至少4个

woff2 / woff / ttf是否足够,或者我需要多少个版本才能安全？我也需要EOT / SVG版本吗？

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
       url('webfont.woff') format('woff'),/* Modern browsers */
       url('webfont.ttf')  format('truetype'),/* Safari,Android,iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

有关更多信息,请参阅此答案：Link

我的主要问题是：哪个更好？ Google字体加载速度更快吗？它更兼容吗？或者我应该坚持使用这些文件？

就个人而言,我更喜欢从Google下载文件并手动使用它们.由于Google UI专门用于下载您选择的字体(以及阅读许可协议),我认为这是合法用途,但我不是律师.

为什么我这样做？

>我在访问Google字体时遇到延迟(200-300毫秒).虽然这并不可怕,但我的大多数服务器环境响应更快,而字体是页面的重要先决条件.命中单独域(即通过浏览器并行化到不同主机)的任何好处都将丢失.
>我手动修剪字体文件以删除所有不需要的字形.这导致文件较小.
> IE8支持 – 看起来.eot并不总是被下载.

这些原因大多是轶事,但我自己更乐意管理字体文件.

我正在使用谷歌Webfont称为“苦涩”.
但在Firefox和Chrome中,它的呈现方式不同. Chrome和Opera似乎以类似的方式呈现它.它没有太大的不同,但它搞砸了段落的格式和组成.

这是CSS：

.small-col h3{

color: #606060;
font-family: 'Bitter',Georgia,"Times New Roman",Times,serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;

}

这是我正在谈论的问题的屏幕截图：
http://i49.tinypic.com/2u46mpi.png

有谁能建议我如何在Firefox,Chrome和Opera中获得一致的渲染？

谢谢

对于您的具体问题,请使用不间断的空间以防止接触和我们分开.

<p> ... contact&nbsp;us </p>