Question

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

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

Answer 1

下载您的字体并放入任何目录。在这里我添加了 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>

Answer 2

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

这是css代码。

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

@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

的其他方式

如何添加自定义字体？

6 个答案: