Firefox中的字体问题（锐边）

Question

我使用这种字体：

https://material.io/guidelines/resources/roboto-noto-fonts.html

（Roboto-Regular.ttf和Roboto-Medium.ttf）

并在css（更少）我用这种方式定义@font-face：

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

@font-face {
  font-family: 'Roboto-Medium';
  src: url('Roboto-Medium.ttf') format('truetype');
}

后来我使用它：

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.some-element {
  font: 2.2rem 'Roboto';
}

并且在每个浏览器中，Firefox和IE除外。

在我得到的浏览器中：

Chrome中的一切都很好：

边缘不平滑，我不知道，为什么？我做错了什么？ 顺便说一句：我不能使用google-fonts

Answer 1

无论出于何种原因，该字体似乎没有针对网络进行优化，即使材料页面显示“Roboto的最新版本专为移动和网络使用而设计。”

但是，有一些免费服务可以将TTF字体转换为常规网页文件，例如Font Squirrel。我使用该工具将“Roboto Regular”字体转换为webfont，它看起来很好。我为你设置了一个演示，但由于这需要托管文件，我将演示放在我的个人网站上 - http://www.mcoker.com/font/

因此，您可以使用该工具为您要使用的每个Roboto字体创建一个webfont包...但是，除非您有特定的理由自己托管该webfont，否则我只会使用Google字体CDN。< / p>

html {
  font-size: 62.5%;
}
body {
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: large;
}
.some-element {
  font-size: 5em;
  margin: 0;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<p class="some-element">foo bar</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut enim vitae arcu vestibulum eleifend. Quisque leo mi, facilisis sed massa non, cursus ornare tortor. Integer sem magna, porttitor at dui at, pharetra iaculis risus. Aliquam at viverra velit. Morbi condimentum, elit eu ultricies imperdiet, elit urna vulputate urna, a commodo lacus est in lorem. Donec ultricies hendrerit volutpat. Donec arcu nisl, rhoncus et auctor convallis, cursus sit amet nisl. Vivamus laoreet augue id congue sollicitudin. </p>

Answer 2

直接使用字体在所有浏览器中都不兼容，因此您应该使用下面提到的链接生成网络字体enter link description here

然后在fonts文件夹中添加所有生成的文件（url（'font / FrescoInfSans-SemiBold.woff'）），请参阅代码段中的示例。

@font-face {
  font-family: 'Roboto-Medium';
  src: url('font/Roboto-Medium.eot?#iefix') format('embedded-opentype'),  url('font/Roboto-Medium.woff') format('woff'), url('font/Roboto-Medium.ttf')  format('truetype'), url('font/Roboto-Medium.svg#Roboto-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
h1{font-family 'Roboto-Medium';}

<h1>Hello Testing Font</h1>