使用@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。

[如何将一些非标准字体添加到网站？]（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; 
}

谢谢，即时通讯只是不知道在哪里把@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; 
}

谢谢！并即时把这个在这里的CSS文件的顶部：https：//github.com/syunghong/veil/blob/master/css/style.css？ – guyintightpants

是的，但它看起来并不像它会在那里呈现，但会呈现在网络服务器或GitHub自定义网页上。 –

我的意思是，我在哪里把@fontace放在这个style.css中？ – guyintightpants

使用@fontface添加自定义字体到style.css

相关推荐