Html 如何在网站上使用自定义字体?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13585186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:06:57  来源:igfitidea点击:

How can I use custom fonts on a website?

htmlfonts

提问by James Logan

In order for my website to look good I need to use a custom font, specifically, Thonburi-Bold. The problem is - the font does not get displayed unless the user has installed it. It also isn't displayed in firefox.

为了让我的网站看起来不错,我需要使用自定义字体,特别是 Thonburi-Bold。问题是 - 除非用户安装了字体,否则不会显示字体。它也不会显示在 Firefox 中。

Is there a workaround to this problem?

这个问题有解决方法吗?

回答by Zencode.dk

You have to import the font in your stylesheet like this:

您必须像这样在样式表中导入字体:

@font-face{
    font-family: "Thonburi-Bold";
    src: url('Thonburi-Bold.ttf'),
    url('Thonburi-Bold.eot'); /* IE */
}

回答by Muthu Kumaran

You can use CSS3 font-faceor webfonts

你可以使用 CSS3font-face或 webfonts

@font-face usage

@font-face 用法

@font-face {
   font-family: Delicious; 
   src: url('Delicious-Roman.otf');
} 

webfonts

网页字体

take a look at Google Webfonts, http://www.google.com/webfonts

看看 Google Webfonts,http://www.google.com/webfonts

回答by Dorvalla

Yes, there is a way. Its called custom fonts in CSS.Your CSS needs to be modified, and you need to upload those fonts to your website.

是的,有办法。它在 CSS 中称为自定义字体。您的 CSS 需要修改,您需要将这些字体上传到您的网站。

The CSS required for this is:

为此所需的 CSS 是:

@font-face {
     font-family: Thonburi-Bold;
     src: url('pathway/Thonburi-Bold.otf'); 
}

回答by hermann

CSS lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let's say myfont.ttf, and upload it to your remote server where your blog or website is hosted.

CSS 允许您在网站上使用自定义字体、可下载字体。您可以下载您喜欢的字体,比如说myfont.ttf,然后将其上传到您的博客或网站所在的远程服务器。

@font-face {
    font-family: myfont;
    src: url('myfont.ttf');
}

回答by Simon Carlson

First, you gotta put your font as either a .otf or .ttf somewhere on your server.

首先,您必须将字体作为 .otf 或 .ttf 放在服务器上的某个位置。

Then use CSS to declare the new font family like this:

然后使用 CSS 像这样声明新的字体系列:

@font-face {
    font-family: MyFont;
    src: url('pathway/myfont.otf'); 
    }

If you link your document to the CSS file that you declared your font family in, you can use that font just like any other font.

如果将文档链接到声明字体系列的 CSS 文件,则可以像使用任何其他字体一样使用该字体。