字体面麻烦（尖锐边缘）在Firefox

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一切都很好：

边缘不光滑，我不知道，为什么呢？我做错了什么？ BTW：我不能使用谷歌的字体

来源

2017-04-07 brabertaser19

无论出于何种原因，该字体似乎并不为网络优化，即使材料页说：“的Roboto的最新版本是专为移动和网络使用情况。 “

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

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

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>

来源

2017-04-09 20:12:01

这个工具craching我的line-height：西里尔文字符 – brabertaser19

直接使用字体也不会在所有的浏览器兼容，所以你应该使用下述链接enter link description here

再加入所有生成的文件的字体文件夹中（URL（生成web字体'font/FrescoInfSans-SemiBold.woff'）），请参阅snippet中的示例。

@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>

来源

2017-04-14 07:05:22

字体面麻烦（尖锐边缘）在Firefox

回答

相关问题