了解字体系列,字体样式以及如何在CSS中引用它们

时间:2017-01-10 13:36:56

标签: html css fonts

我正在使用字体,我最近发现了一些错误。所以我需要了解我做错了什么。

Adroid Roboto家族

我已在我的机器上安装了Roboto font family,所以现在这就是我在Fonts下的系统中看到的内容:

enter image description here

但正如你所看到的,我安装了一个家庭,如果我深入其中,我会看到:

enter image description here

我的网络应用程序

因此,在我的Web应用程序中,我有一个定义字体的CSS样式:

.mytext {
  font-family "Roboto Regular", Tahoma, sans-serif;
}
.mytext-bold {
  font-family "Roboto Bold", Tahoma, sans-serif;
}

问题是,当我可视化页面时,字体不正确。当我可视化页面时,我看到Tahoma

所以,如果我打开其中一种字体样式,我会看到:

enter image description here

所以我意识到我必须在family-name中使用的名称是Roboto,而不是Roboto RegularRoboto Bold,如Fonts中的样式名称所示文件夹:

.mytext {
  font-family Roboto, Tahoma, sans-serif;
}
.mytext-bold {
  font-family Roboto, Tahoma, sans-serif;
}

问题

但是,如何应用不同的风格? myfont-bold应该具有粗体样式,但如果Roboto中的名称始终为font-family,我如何才能获得不同的样式调整?

奇怪的是,如果我使用font-family: Roboto Light, ...然后它可以工作:(我不明白这里的行为。我应该如何正确引用字体?

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

编辑:我在第一篇文章中犯了一个错误,就是把'font-family'两次。第二个属性应该是' font-weight'。对不起。

另一个答案是正确的。 font-weight:然后以100为增量100-900将改变字体的重量(如果字体具有可用的权重)。使用谷歌字体可以让您对这里发生的事情有所了解。嵌入时:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">

您可以看到Google字体内容投放网络(CDN)提供的不同权重,这是向您的网站用户提供他们可能未在其系统上安装的字体的常用方法。因此,如果上面是您的HTML或安装了Roboto,那么:

.mytext {
    font-family: Roboto, Tahoma, sans-serif;
    font-weight: 400;
}

会给你一个正常的体重Roboto,并且:

.mytext-bold {
    font-family: Roboto, Tahoma, sans-serif;
    font-weight: 700;
}

会给你大胆的。希望这会有所帮助。