使用@fontface添加自定義字體到style.css

我有一個自定義字體，我想在網頁上使用。具體GT-Walsheim-PRO-中等Oblique.woff來自：
https://andrewsonline.co.uk/content/fonts/使用@fontface添加自定義字體到style.css

我一起工作的style.css文件是這樣的：
https://github.com/syunghong/veil/blob/master/css/style.css

如何incorperate使用@fontface這個字體文件我的style.css文件？
我在名爲字體的文件夾中有GT-Walsheim-Pro-Medium-Oblique.woff。

來源

2017-08-17 guyintightpants

[如何將一些非標準字體添加到網站？]（https://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a -website） – Steve

對，即時通訊只是不知道把@fontface放在我已經擁有的東西的哪裏......它到底在哪裏 - 完全是？ – guyintightpants

通常位於CSS文件的頂部。 – Steve

這裏

@font-face { 
    font-family: 'RobotoBold'; /*this is what you put on your font family*/ 
    src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/ 
}

使用它

p { 
    font-family: RobotoBold; 
    font-size: 14; 
}

來源

2017-08-17 03:53:10 JkAlombro

謝謝，即時通訊只是不知道在哪裏把@fontface放在我已經有的東西里面......但是它到底在哪裏 - 到底是什麼？在：https://github.com/syunghong/veil/blob/master/css/style.css – guyintightpants

編輯它與例:)編輯：。我搞砸了，它是RobotoBold，而不是RobotoMedium ..無論如何已經編輯它。 – JkAlombro

嘿謝謝。我只是不知道如何將這與我已經使用的，這是https：// github。com/syunghong/veil/blob/master/css/style.css – guyintightpants

如果你擁有使用web字體的權利，取原TTF或OTF字體和渲染全套here at FontSquirrel。不同的瀏覽器喜歡不同的字體類型，舊版瀏覽器是最挑剔的。

然後將字體添加到樣式表的頂部，以便在您看到FOUT「無風格文本的Flash」時首先加載它，甚至在樣式表內嵌入之前加載該字體。 More info here但基本上你希望在你的html開始加載之前加載並準備好字體。

然後加載您的字體是這樣的：

@font-face { 
     font-family: 'GT Walsheim Pro Medium Oblique'; 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot'); 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'), 
     url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    }

字體松鼠會爲你輸出上面的代碼，當你渲染字體包那裏。

呼叫在你的CSS這樣的字體，我用您的H職稱爲例，確保始終有字體回退的情況下，它的錯誤或者不加載由於某種原因：

h1, h2, h3, h4, h5, h6 { 
    font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif; 
}

來源

2017-08-17 03:55:25

謝謝！並即時把這個在這裏的CSS文件的頂部：https：//github.com/syunghong/veil/blob/master/css/style.css？ – guyintightpants

是的，但它看起來並不像它會在那裏呈現，但會呈現在網絡服務器或GitHub自定義網頁上。 –

我的意思是，我在哪裏把@fontace放在這個style.css中？ – guyintightpants

使用@fontface添加自定義字體到style.css

回答

相關問題