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

Posted 2023-03-15

【中文标题】如何添加自定义字体？ [复制]

【英文标题】：How do I add custom fonts? [duplicate]

【发布时间】：2014-03-11 23:48:32

【问题描述】：

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

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

【问题讨论】：

***.com/questions/107936/…

深入了解@font-face w3schools.com/cs-s-ref/css3_pr_font-face_rule.asp

你丢失了谷歌地址吗？

查看 Paul Irishs Blogpost 的防弹字体。 paulirish.com/2009/bulletproof-font-face-implementation-syntax

【参考方案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>

【参考方案2】：

.my-font font-family: font name;

这是css代码。

【参考方案3】：

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

<style> 
@font-face

font-family: myFirstFont;
src: url(fontFILE.woff);


div

font-family:myFirstFont;

</style>

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

这是一篇关于此的 W3Schools 文章：here

【参考方案4】：

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

【参考方案5】：

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

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

在法律上小心后一种选择；并非所有字体都被许可在网络上使用。

【参考方案6】：

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

@font-face

 font-family: your_font_name;
 src: url(your_font_folder/font_name.ttf);

并像这样使用它

h2.titlefont-family:your_font_name

或其他方式使用 Google 字体 API https://www.google.com/fonts