在網頁中嵌入字體

我已經搜索了很多，試圖找出如何在網頁上嵌入字體。據我瞭解，您應該將字體以.ttf和.eot格式上傳到您的網頁。並在樣式表中使用@ font-face。在網頁中嵌入字體

我已將Kingthings_Italique.eot和Kingthings_Italique.ttf放入我的網頁的根目錄。

創建一個像這樣的樣式表。

.MyStyle 
{ 
    /* For IE */ 
    @font-face 
    { 
     font-family: 'Kingthings Italique'; 
     src: url('Kingthings_Italique.eot'); 
    } 

    /* For Other Browsers */ 
    @font-face 
    { 
     font-family: 'Kingthings Italique'; 
     src: local('Kingthings Italique Regular'), 
      local('KingthingsItalique-Regular'), 
      url('Kingthings_Italique.ttf') format('truetype'); 
    } 
}

首先我指的是像這樣

<head runat="server"> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

而且我嘗試，如果我使用IE8使用它像這樣

<asp:Label ID="lbl" runat="server" Font-Bold="True" 
     Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>

但無論或chrome2字體心不是改變。

如果我理解正確http://randsco.com/?p=680&more=1&c=1如果我打開IE8源我應該然後能夠看到的字體名稱，應該可以

？，因爲如果我通過ie8代碼尋找國王，我什麼也沒找到

來源

2009-09-05 CruelIO

爲了嵌入字體功能正常工作（在瀏覽器支持它），你也有新的字體家庭適用於樣式選擇器。

例如

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

不會做的伎倆，即使它確實會加載一個字體（如果它是一個有效的URL） - 因爲我們所做是加載字體。我們還需要實際應用，所以

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

h1 { 
    font-family: CustomFont; 
}

兩個負載的自定義字體，並將其應用到你的CSS選擇器（在這個例子中，H1）。

你幾乎肯定會想要閱讀關於@ font-face的教程（Krule已經提供了一個很好的上面的鏈接，提供可用於自由字體的鏈接。）同上所有關於優美變形的警告，因爲這仍然不是一個普遍支持的功能。

來源

2009-09-23 00:13:04

以上使用如何使用阿拉伯字體？ – 2013-01-25 06:58:09

AFAIK，大多數瀏覽器（還沒有）真正支持使用純CSS的字體嵌入。

雖然存在其他解決方案。如果您不介意使用JavaScript，請查看cufon，它使用SVG/VML呈現當今使用的大多數Web瀏覽器（甚至IE6）中的任何字體。

來源

2009-09-05 09:42:10

這不是你可以或不應該做的。大多數網絡已經確定了一些基本字體（serif，sans-serif等），然後由瀏覽器決定。您可以指定多個字體，讓瀏覽器降級，如果它是不可用：

font-family: Kingthings Italique, sans-serif

這可能是最好的策略，如果人們會顯示字體，否則會變成一個通用字體。

來源

2009-09-05 09:42:57 AAA

使用CSS字體嵌入不應該在現代Web瀏覽器中工作。更確切地說，使用CSS的字體嵌入是CSS2的一部分，並且被一些瀏覽器支持，但是在CSS2.1中被收回（實際上也從CSS2當前規範中被移除）。

當瀏覽器開始支持CSS3時，期待字體支持恢復。 Firefox 3.5，Opera 10和Safari預計將支持使用TTF字體的CSS3樣式字體嵌入，但由於某些原因，Chrome瀏覽器不支持CSS3字體嵌入。

在IE8上呈現您的字體的問題可能與第二個font-face聲明定義與第一個相同的字體系列並因此覆蓋它的事實有關 - 但不聲明IE可以使用的任何eot字體使用。

我建議你使用一個單一的font-face定義，如;

@font-face 
{ 
    font-family: 'Kingthings Italique'; 
    src: local('Kingthings Italique Regular'), 
     local('KingthingsItalique-Regular'), 
     url('Kingthings_Italique.eot'), 
     url('Kingthings_Italique.ttf') format('truetype'); 
}

然後IE可以嘗試先使用eot字體。其他瀏覽器（但不是Chrome顯然）會嘗試使用eot，然後回到ttf渲染。這當然假設IE可以處理「替代來源」的定義，我不知道它的確如此 - @font-face documentation in MSDN沒有提及這個。

來源

2009-09-05 10:23:55 Guss

雖然由於缺乏廣泛的支持，仍然不推薦使用@ font-face，但在現代瀏覽器（大多數）中有一種使用自定義字體的方法。但是，不要忘記提供備份解決方案，以便在舊版瀏覽器中進行適度降級。

無論如何，你應該檢查this tutorial瞭解更多詳情。

來源

2009-09-05 13:23:55 Krule

首先嚐試使用絕對路徑：

url('/Kingthings_Italique.ttf') 

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />

來源

2009-09-05 16:30:04

我想你應該只有一個@ font-face聲明，其中包含一個font-family的許多源代碼。它看起來IE不喜歡你的聲明。從提到的文章（http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding）的代碼：

@font-face { 
     font-family: " your FontName "; 
     src: url(/location/of/font/FontFileName.eot); /* IE */ 
     src: local(" real FontName "), url(/location/of/font/FontFileName.ttf) format("truetype"); /* non-IE */ 
} 

/* THEN use like you would any other font */ 
.yourFontName { 
     font-family:" your FontName ", verdana, helvetica, sans-serif; 
}

第一源應該是EOT文件。第二個來源應該是TTF文件，並以本地字體名稱開頭。這是一種破解。第二個源屬性對IE來說看起來無效，所以這個瀏覽器使用第一個。對於其他瀏覽器都是有效的，但只有最後一個被使用。

對於TTF文件轉換爲EOT我用這個小程序： http://code.google.com/p/ttf2eot/

的方法應該由以下瀏覽器的支持：

火狐3.6 +
的Internet Explorer 4 +
Opera 10.00 +
Chrome 4.0 +
Safari 3.1 +

我已經做了一些測試，它一直在爲我工作。 Chrome 2可能太舊了。

來源

2010-02-12 21:12:05 Michas

這不起作用。請參閱我的答案，以獲得更準確的方式來同時嵌入IE和非IE瀏覽器的字體。 – Chev 2010-11-17 17:27:35

您需要在IE和非IE瀏覽器中支持嵌入字體。

IE塊需要排在第二位，並且包含在IE選擇器註釋中。

例如：

<style type="text/css"> 
    @font-face 
    { 
      font-family: 'myFont'; 
      src: url('/location/of/myFont.ttf'); 
    } 
</style>

這將爲所有現代瀏覽器的工作，除了IE瀏覽器（Firefox和Safari，鉻等）現在讓IE的行爲，你將需要：

<!--[if IE]> 
<style type="text/css"> 
    @font-face 
    { 
      font-family: 'myFont'; 
      src: url('/location/of/myFont.eot'); 
    } 
</style> 
<![endif]-->

從IE 5開始，if語句只能被IE讀取。這對於提供IE特別指示非常有用。對於其他瀏覽器，它只是一些註釋掉的文本，不會呈現。

如果你沒有你的.ttf字體的.eot格式，那麼你可以去到以下網址 http://www.kirsle.net/wizards/ttf2eot.cgi 這真的很容易使用，並在幾秒鐘內產生.eot字體爲您服務。

+1如果你喜歡我的回答。註釋如果你認爲我需要改進:)

來源

2010-11-17 17:33:50 Chev

我承認這個問題是比較舊的東西，但現在有從谷歌有很大的字體API，人們可以<link>到：https://developers.google.com/webfonts/

來源

2012-07-29 05:42:20

在網頁中嵌入字體

回答

相關問題