Question

我在使用字体方面遇到了一些问题我需要在我的网页上使用“Raleway Thin”和“Raleway”字体，这两个名字都是Raleway。当我输入font-family:"raleway Thin","sans sherif";时，它什么也没做。什么是最好的解决方案？

here is the font

Answer 1

Raleway Thin是＆＃34; Raleway＆＃34;字体。从谷歌字体中选择正常重量和100重量，使用＆＃34; Raleway＆＃34;作为您想要使用它的字体名称，并使用font-weight: 100;在哪里使用＆＃34; thin＆＃34;。您还可以将字体粗细分配给类，例如.thin，并在任何想要使用细字体的位置使用该类。

＆＃13;

h1,h2,.thin {
  font-family: Raleway,sans-serif;
}
h2,.thin {
  font-weight: 100;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Raleway:100,400" rel="stylesheet">
<h1>raleway</h1>
<h2>raleway thin</h2>
<h3 class="thin">also raleway thin</h3>

＆＃13;

Answer 2

这是使用谷歌字体的最佳方式：

body {
font-family: 'Raleway', sans-serif;
font-weight: 400;/* Normal Font */
}
h1{
font-weight: 100;/* Thin Font */
}
h2{
font-weight: 200;/* Extra Light Font */
}
h3{
font-weight: 300;/* Light Font */
}
h4{
font-weight: 500;/* Medium Font */
}
h5{
font-weight: 600;/* Semi Bold Font */
}
h6{
font-weight: 700;/* Bold Font */
}

<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<h1>test</h1>
<h2>test</h2>
<h3>test</h3>
<h4>test</h4>
<h5>test</h5>
<h6>test</h6>

你可以像那样使用800,900。

Answer 3

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Raleway:100,600');
*{
    font-size:30px;
}
.thin{
    font-family:Raleway;
    font-weight:100;
}
.bold{
    font-family:Raleway;
    font-weight:600;
}

＆＃13;

<div>
    <span class="thin">Hello</span> 
    <span class="bold">World!</span>
</div>

＆＃13;

JSFIDDLE

如何使用相同名称的不同字体

3 个答案: