如何以相同的名稱使用不同的字體

-1

我在使用字體時遇到了一些問題我需要爲我的網頁使用「Raleway Thin」和「Raleway」字體，並且這兩個名稱都是Raleway。當我輸入font-family:"raleway Thin","sans sherif";它什麼都不做。這是最好的解決方案是什麼？如何以相同的名稱使用不同的字體

here is the font

來源

2017-03-03 Tisu Kwang

你有沒有嘗試過使用['@ font-face']（https://developer.mozilla.org/en/docs/Web/CSS/@font-face） – Swellar

@Tisu Kwang投票贊成什麼？請在這裏提到原因..！ http://jsfiddle.net/klakshman318/qLfpj4vj/3/ –

@Lakshman Kambam如果我沒有錯，與OP的聲譽，甚至他投下了你的答案，它將不可見 – Swellar

Raleway薄是100重量「Raleway」字體。從谷歌字體中選擇正常體重和100個體重，使用「Raleway」作爲您想使用它的字體名稱，並使用font-weight: 100;要使用「瘦身」的地方。您還可以將字體重量分配給類，如.thin，並在您想要使用該細字體的任何位置使用該類。

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

<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>

來源

2017-03-03 04:33:20

-1

@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; 
 
}

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

JSFIDDLE

來源

2017-03-03 04:34:56

這是最好的方式使用谷歌的字體：

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。

來源

2017-03-03 04:44:00

如何以相同的名稱使用不同的字體

回答

相關問題