我寻求一种具有全范围字体粗细(即 100、200、300...900)的网络字体。
我尝试过的所有字体似乎都只支持两种字体粗细:普通字体和粗体。如果我尝试数值，我会得到 100-500 的正常字体粗细和 600-900 的粗体字体粗细。
有关字体粗细的更多信息在 Mozilla documentation page 上给出.
我知道 Google fonts ，但我看不出有什么办法可以将结果限制为我感兴趣的字体。
如果有人能告诉我甚至一种字体具有超过两个字体粗细，那将会很有帮助。
我按照 this question 的回答中的建议尝试了 Helvetica Neue ，但我只看到两个字体粗细。
我的浏览器是 Firefox 26。
最佳答案
在 Google Fonts 网站上玩了更多之后，我在顶部找到了排序选项，它允许按“样式数”排序。有许多字体支持一系列字体粗细。第一个返回的是 Exo .
在我发现@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>
关于html - 如何找到具有全范围字体粗细的网络字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21496095/