Question

我寻找具有全系列字体权重的网络字体（即100,200,300 ... 900）。

我尝试的所有字体似乎只支持两种字体权重：普通和粗体。如果我尝试数值，我得到正常的字体重量为100-500，粗体字体重量为600-900。

有关字体权重的更多信息，请参见Mozilla documentation page。

我知道Google fonts，但我认为无法将结果限制为我感兴趣的字体。

如果有人能告诉我一个字体超过两个字体，那将会有所帮助。

我按照this question的答案推荐了Helvetica Neue，但我只看到了两个字体权重。

我的浏览器是Firefox 26。

Answer 1

在使用Google Fonts网站进行更多游戏后，我在顶部找到了排序选项，允许按“样式数”排序。有许多字体支持一系列字体权重。第一个返回的是Exo。

我无法在本地使用数字font-weight工作的字体，直到我发现@ font-face CSS规则是必要的。以下是演示Exo字体的全部字体权重所需的最少代码。

<!DOCTYPE html>
<html>
 <head>
  <title>Exo Font Weights Demo</title>
  <style>
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 100; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/LOvrl2pqswCkT8i3Cr0n-A.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 200; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/6QiS59P8BsX03DD46j0MBA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 300; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/4KZbxe9r2TXLhWnvIEYFtg.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 400; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/ciAJ5J-gAMQ5PmKP3W3-DQ.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 500; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/P68xbqSRbv2P2Y1Gn89_Sw.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 600; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/81Bt2ny37U7oEhl3JhWo7g.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 700; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/XImhdIFxStwHS9PAgE4VpA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 800; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/8F32bA5gdXrOnEJkKVwXsA.woff) format('woff');}
@font-face {font-family: 'Exo'; font-style: normal; font-weight: 900; src: url(http://themes.googleusercontent.com/static/fonts/exo/v2/vRBeganESUK4UFluFjuHcQ.woff) format('woff');}

.Exo-normal-100 {font-family: 'Exo'; font-style: normal; font-weight: 100;}
.Exo-normal-200 {font-family: 'Exo'; font-style: normal; font-weight: 200;}
.Exo-normal-300 {font-family: 'Exo'; font-style: normal; font-weight: 300;}
.Exo-normal-400 {font-family: 'Exo'; font-style: normal; font-weight: 400;}
.Exo-normal-500 {font-family: 'Exo'; font-style: normal; font-weight: 500;}
.Exo-normal-600 {font-family: 'Exo'; font-style: normal; font-weight: 600;}
.Exo-normal-700 {font-family: 'Exo'; font-style: normal; font-weight: 700;}
.Exo-normal-800 {font-family: 'Exo'; font-style: normal; font-weight: 800;}
.Exo-normal-900 {font-family: 'Exo'; font-style: normal; font-weight: 900;}
  </style>
 </head>
 <body>
  <p class="Exo-normal-100">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-200">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-300">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-400">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-500">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-600">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-700">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-800">Grumpy wizards make toxic brew for the evil Queen</p>
  <p class="Exo-normal-900">Grumpy wizards make toxic brew for the evil Queen</p>
 </body>
</html>

如何找到具有全范围字体权重的网络字体？

1 个答案: