如何添加自定义字体?

时间:2014-02-13 08:10:59

标签: html css

如何在html网站上安装自定义字体?

例如,我正在婚礼网站上工作,我找到了很多适合该主题的好字体,但我找不到将该字体添加到服务器的正确方法,或者包含该字体CSS?

6 个答案:

答案 0 :(得分:4)

下载您的字体并放入任何目录。在这里我添加了 fonts 目录

   <style>
    @font-face {
        font-family: 'maven_pro_light_300regular';
        src: url('fonts/mavenprolight-300-webfont.eot');
        src: url('fonts/mavenprolight-300-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/mavenprolight-300-webfont.ttf') format('truetype'),
             url('fonts/mavenprolight-300-webfont.woff') format('woff'),
             url('fonts/mavenprolight-300-webfont.svg#maven_pro_light_300regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    </style>

您可以通过以下示例使用它:

<style>
h2{
    font-family:maven_pro_light_300regular; 
}
</style>

答案 1 :(得分:1)

.my-font{ font-family: font name; }

这是css代码。

答案 2 :(得分:1)

使用CSS3,您可以引用一个字体文件,以便在HTML页面上使用。这是一些代码:

<style> 
@font-face
{
font-family: myFirstFont;
src: url(fontFILE.woff);
}

div
{
font-family:myFirstFont;
}
</style>

将添加文件的位置以代替“fontFILE”。您只需将字体文件与HTML页面一起上传。

以下是关于此问题的W3Schools文章:here

答案 3 :(得分:1)

如果您使用Font Squirrel之类的服务,则可以制作您有权使用的任何字体的网络安全版本。它还会创建一个包含所需内容的样式表。剩下的就是在CSS中添加font-family并在html页面中包含css样式表。

答案 4 :(得分:1)

Google字体拥有大量自定义字体,这些字体非常易于安装,并且可以在任何地方使用,并且可以合法使用:https://www.google.com/fonts。只需浏览并单击所需的字体,然后单击“使用”。它将为您提供所有必需的CSS,字体文件本身由Google托管。

如果要创建完全自定义的Web字体,可以使用FontSquirrel的Web字体生成器(http://www.fontsquirrel.com/tools/webfont-generator)。这允许您上传已经拥有的任何True Type字体文件并将其转换为Web字体;它还会为您提供必要的CSS,但您需要自己托管字体文件。

使用后一种选择合法小心;并非所有字体都被授权在网络上使用。

答案 5 :(得分:1)

如果你有一个真正的字体,那么你必须使用这个

@font-face
{
 font-family: your_font_name;
 src: url(your_font_folder/font_name.ttf);
}

并像这样使用

h2.title{font-family:your_font_name}

或使用Google字体API https://www.google.com/fonts

的其他方式