当前位置：文江博客话题详情

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

发布于 2024-12-12 17:17:42 字数 114 浏览 0 评论 0原文

我没有使用 flash 或 php - 并且有人要求我将自定义字体添加到简单的 HTML 布局中。 “KG June Bug”

我已将其下载到本地 - 是否有一个简单的 CSS 技巧可以完成此操作？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

就像说晚安 2024-12-19 17:17:43

是的，您可以使用名为 @font-face 的 CSS 功能。
它只在CSS3中得到正式批准，但在CSS2中被提出并实现，并且在IE中已经支持了相当长的时间。

您可以像这样在 CSS 中声明它：

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

然后，您可以像其他标准字体一样引用它：

 h3 { font-family: Delicious, sans-serif; }

因此，在这种情况下，

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

您只需将 JUNEBUG.TFF 放在与 html 文件相同的位置即可。

我从 dafont.com 网站下载了字体：

http://www.dafont.com/junebug.font

Yes, you can use the CSS feature named @font-face.
It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.

You declare it in the CSS like this:

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

Then, you can just reference it like the other standard fonts:

 h3 { font-family: Delicious, sans-serif; }

So, in this case,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

And you just need to put the JUNEBUG.TFF in the same location as the html file.

I downloaded the font from the dafont.com website:

http://www.dafont.com/junebug.font

回复收藏 0 原文

遇见了你 2024-12-19 17:17:43

为了获得最佳的浏览器支持，您的 CSS 代码应如下所示：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

有关详细信息，请参阅文章在 CSS 技巧中使用 @font-face。 com。

For the best possible browser support, your CSS code should look like this :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

For more info, see the article Using @font-face at CSS-tricks.com.

回复收藏 0 原文

霞映澄塘 2024-12-19 17:17:43

您可以在大多数现代浏览器中使用@font-face。

以下是有关其工作原理的一些文章：

以下是将字体添加到应用程序的良好语法：

http://webdesignerwall.com/tutorials/css3-font-face-design-guide fontspring.com/blog/further-hardening-of-the-bulletproof-syntax" rel="nofollow noreferrer">http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

这里有几个地方可以转换字体以与@font-face一起使用：

如果您不想使用 font-face，cufon 也可以工作，并且它在网站上有很好的文档：

http://cufon.shoqolate.com/generate/

回复收藏 0 原文

静谧 2024-12-19 17:17:43

试试这个

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

维利斯网站

Try this

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

vilis.org

回复收藏 0 原文

鹿港巷口少年归 2024-12-19 17:17:43

如果您使用外部样式表，代码可能如下所示：

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

并且应该保存在单独的 .css 文件中（例如 styles.css）。如果您的 .css 文件位于与页面代码分开的位置，则实际字体文件应与 .css 文件具有相同的路径，而不是 .html 或 .php 网页文件。那么网页需要类似：

<link rel="stylesheet" href="css/styles.css">

在中html 页面的部分。在此示例中，字体文件应与样式表一起位于 css 文件夹中。之后，只需在 html 中的任何标签内添加 class="junebug" 即可在该元素中使用 Junebug 字体。

如果您将 css 放入实际网页中，请在 html 的头部添加 style 标记，例如：

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

实际元素样式可以包含在上面的

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

and

<h1 class="junebug">This is Junebug</h1>

最不可接受的方式是：

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

and

<h1 style="font-family: Junebug;">This is Junebug</h1>

不好使用内联样式的原因是最佳实践规定样式应全部保留在一个位置，以便编辑实用。这也是我建议使用外部样式表的第一个选项的主要原因。我希望这有帮助。

If you are using an external style sheet, the code could look something like this:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

And should be saved in a separate .css file (eg styles.css). If your .css file is in a location separate from the page code, the actual font file should have the same path as the .css file, NOT the .html or .php web page file. Then the web page needs something like:

<link rel="stylesheet" href="css/styles.css">

in the <head> section of your html page. In this example, the font file should be located in the css folder along with the stylesheet. After this, simply add the class="junebug" inside any tag in your html to use Junebug font in that element.

If you're putting the css in the actual web page, add the style tag in the head of the html like:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

And the actual element style can either be included in the above <style> and called per element by class or id, or you can just declare the style inline with the element. By element I mean <div>, <p>, <h1> or any other element within the html that needs to use the Junebug font. With both of these options, the font file (Junebug.ttf) should be located in the same path as the html page. Of these two options, the best practice would look like:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

and

<h1 class="junebug">This is Junebug</h1>

And the least acceptable way would be:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

and

<h1 style="font-family: Junebug;">This is Junebug</h1>

The reason it's not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical. This is also the main reason that I recommend using the very first option of using external style sheets. I hope this helps.

回复收藏 0 原文

山有枢 2024-12-19 17:17:43

有一个简单的方法可以做到这一点：
在 html 文件中添加：

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

注意：您输入您拥有的 .ttf 文件的名称。
然后转到您的 css 文件并添加：

h1 {
    color: blue;
    font-family: vermin vibes;
}

注意：您输入了您所拥有的字体的字体系列名称。

注意：不要将 font-family 名称写为 font.ttf 名称
例如：如果您的 font.ttf 名称是：“vermin_vibes.ttf”，您的字体系列将是：“vermin vibes”字体系列不包含特殊字符，如“-、_”...等，它只能包含空格。

there is a simple way to do this:
in the html file add:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

Note: you put the name of .ttf file you have.
then go to to your css file and add:

h1 {
    color: blue;
    font-family: vermin vibes;
}

Note: you put the font family name of the font you have.

Note: do not write the font-family name as your font.ttf name
example: if your font.ttf name is: "vermin_vibes.ttf" your font-family will be: "vermin vibes" font family doesn't contain special chars as "-,_"...etc it only can contain spaces.

回复收藏 0 原文

~没有更多了~