如何在 HTML 站點上安裝自定義字體

Question

我沒有使用 flash 或 php - 我被要求在簡單的 HTML 布局中添加自定義字體。 “KG 六月蟲”

我在本地下載了它 - 是否有一個簡單的 CSS 技巧來完成這個？

Answer 1

是的，您可以使用名為@ 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

Answer 2

您可以在大多數現代瀏覽器中使用@ font-face。

這里有一些關於它是如何工作的文章：

以下是將字體添加到應用程序的良好語法：

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

以下是轉換字體以供@ font-face使用的幾個地方：

如果你不想使用font-face，cufon也會工作，並且它在網站上有很好的文檔：

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

Answer 3

為了獲得最佳瀏覽器支持，您的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-tricks.com上的 使用@ font-face一 文。

Answer 4

試試這個

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

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

vilis.org

Answer 5

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

@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頁面的<head>部分。 在此示例中，字體文件應與樣式表一起位於css文件夾中。 在此之后，只需在html中的任何標記內添加class =“junebug”，即可在該元素中使用Junebug字體。

如果您將css放在實際網頁中，請在html的頭部添加樣式標記，如：

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

實際的元素樣式可以包含在上面的<style> ，也可以按類或id調用每個元素，或者你可以使用元素內聯聲明樣式。 按元素我的意思是<div>，<p>，<h1>或html中需要使用Junebug字體的任何其他元素。 使用這兩個選項，字體文件（Junebug.ttf）應位於與html頁面相同的路徑中。 在這兩個選項中，最佳實踐如下：

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

和

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

最不可接受的方式是：

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

和

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

使用內聯樣式不好的原因是最佳實踐要求樣式應保存在一個地方，以便編輯是實用的。 這也是我建議使用外部樣式表的第一個選項的主要原因。 我希望這有幫助。

Answer 6

你只需要將 JUNEBUG.TFF 放在與 html 文件相同的位置。

我從Yofonts網站下載了字體：

Answer 7

有一種簡單的方法可以做到這一點：在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”，則您的font-family將為：“vermin vibes”字體系列不包含特殊字符作為“ - ，_”......等它只能包含空格。

如何在 HTML 站點上安裝自定義字體

問題描述

6 個解決方案

解決方案1
248 已采納 2011-11-01 02:03:02

解決方案2
16 2011-11-01 02:07:20

解決方案3
14 2016-01-24 19:15:18

解決方案4
7 2016-09-18 07:59:54

解決方案5
2 2017-12-27 23:56:30

解決方案6
0 2022-01-10 09:39:10

解決方案7
-1 2017-10-10 08:25:02

如何在 HTML 站點上安裝自定義字體

問題描述

6 個解決方案

解決方案1 248 已采納 2011-11-01 02:03:02

解決方案2 16 2011-11-01 02:07:20

解決方案3 14 2016-01-24 19:15:18

解決方案4 7 2016-09-18 07:59:54

解決方案5 2 2017-12-27 23:56:30

解決方案6 0 2022-01-10 09:39:10

解決方案7 -1 2017-10-10 08:25:02

解決方案1
248 已采納 2011-11-01 02:03:02

解決方案2
16 2011-11-01 02:07:20

解決方案3
14 2016-01-24 19:15:18

解決方案4
7 2016-09-18 07:59:54

解決方案5
2 2017-12-27 23:56:30

解決方案6
0 2022-01-10 09:39:10

解決方案7
-1 2017-10-10 08:25:02