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

208

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

來源

2011-11-01 02:03:02

+1

對不起，如果它是「家庭作業」如果我用這個JUNEBUG字體只是純文本 – adam

+0

我已經更新了答案，代碼的樣子是什麼。順便說一下，好看的字體。 –

+0

我不知道你能做到這一點。它也可以在其他瀏覽器中使用嗎？ –

16

可以在最現代的瀏覽器使用@字體面。

這裏的一些文章它是如何工作的：

這裏是添加字體到您的應用程序一個好的語法：

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

這裏有幾個地方字體轉換爲使用@字體面：

此外，如果你不」的Cufón將工作不想使用font-face，它在網站上有很好的文檔：

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

來源

2011-11-01 02:07:20 nheinrich

10

爲了儘可能最好的瀏覽器的支持，你的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; 
}

欲瞭解更多信息，請參閱文章Using @font-face在CSS-tricks.com。

來源

2016-01-24 19:15:18

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

來源

2016-09-18 07:59:54

-1

有一個簡單的方法來做到這一點：在HTML文件中加入：

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

注：你把.ttf文件的名字喲你有。然後去到你的CSS文件，並添加：

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

注意：你把你有字體的字體家族名。例如：如果您的font.ttf名稱爲：「vermin_vibes.ttf」，則您的字體系列將爲：「vermin vibes」字體系列不會生成字體系列名稱，如果您的font.ttf名稱爲：「vermin_vibes.ttf」不包含「 - ，_」等特殊字符，只能包含空格。

來源

2017-10-10 08:25:02

+0

你應該在CSS中將它定義爲一個'font-face'，而不是需要一個ttf文件。 – Arcath

+0

它不是必須這樣做，你可以簡單地這樣做，我總是用兩種方式做，而且兩種都行 –

1

如果使用外部樣式表，代碼可能是這個樣子：

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

，應該在一個單獨的.css文件被保存（如styles.css的）。如果.css文件位於與頁面代碼分開的位置，則實際的字體文件應該與.css文件具有相同的路徑，而不是.html或.php網頁文件。然後該網頁需要是這樣的：在你的HTML頁面的<頭>部分

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

。在這個例子中，字體文件應該與樣式表一起位於css文件夾中。在此之後，只需在html中的任何標記內添加class =「junebug」，即可在該元素中使用Junebug字體。

如果你把CSS中的實際網頁，添加樣式標記在HTML的頭，如：

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

和實際的元素風格既可以包含在上述<style>和按類或ID調用每個元素，或者你可以直接聲明該元素的內聯樣式。元素我的意思是<div>,<p>,<h1>或需要使用Junebug字體的html中的任何其他元素。有了這兩個選項，字體文件（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>

它不適合使用的原因內聯樣式是最佳實踐，表明樣式應該保留在一個地方，以便編輯實用。這也是我推薦使用外部樣式表的第一個選項的主要原因。我希望這有幫助。

來源

2017-12-27 23:56:30

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

回答

相關問題