如何添加自定义字体？ [复制]

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 并将 css 样式表包含在您的 html 页面中。

Answer 5

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

如果您想创建完全自定义的网络字体，可以使用 FontSquirrel 的网络字体生成器 (http://www.fontsquirrel.com/tools/webfont-generator)。这允许您上传您已经拥有的任何 True Type 字体文件并将其转换为网络字体；它还会为您提供必要的 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