【问题标题】:How can I find web-fonts with full range of font-weights?如何找到具有全范围字体权重的网络字体?
【发布时间】:2014-02-25 02:14:52
【问题描述】:

我寻求一种具有全范围字体粗细(即 100、200、300...900)的网络字体。

我尝试过的所有字体似乎只支持两种字体粗细:普通和粗体。如果我尝试数值,我会得到 100-500 的正常字体粗细,以及 600-900 的粗体字体粗细。

Mozilla documentation page 上提供了有关字体权重的更多信息。

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

如果有人能告诉我一种字体有两个以上的字体粗细,那将很有帮助。

按照this question 的回答中的建议,我尝试了 Helvetica Neue,但我只看到了两个字体粗细。

我的浏览器是 Firefox 26。

【问题讨论】:

  • 无法将结果限制为我感兴趣的字体 - 当您访问 Google 字体时,您会在屏幕左侧看到什么?
  • 我看到了厚度、倾斜度和宽度的滑块。我想要支持各种粗细的字体。
  • 有大量的字体,它们的权重范围很广——例如,Open Sans 就在我的脑海中。但是也有很多字体服务,包括所有字体权重,例如 Typekit 等。

标签: html css fonts


【解决方案1】:

在多玩了 Google 字体网站之后,我发现顶部有“排序”选项,它允许按“样式数量”进行排序。有许多字体支持一系列字体粗细。第一个返回的是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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-09-05
    • 2013-04-02
    • 2018-05-09
    • 1970-01-01
    • 1970-01-01
    • 2012-05-03
    • 2010-09-06
    相关资源
    最近更新 更多