爲什麼Google字體無法顯示在我的網站上？

我們的ASP.NET C＃web應用程序用於以下環境： .NET Framework 4爲什麼Google字體無法顯示在我的網站上？

ASP.NET Web窗體。

IIS 7級

的Windows 2008

Visual Studio 2010中

.NET IDE C＃

HTTPS（SSL）

我們的項目網頁設計師想使用谷歌的字體叫Antic Slab and Antic：

http://www.google.com/fonts#UsePlace:use/Collection:Antic

http://www.google.com/fonts#UsePlace:use/Collection:Antic+Slab

我下載了與谷歌的字體相關的zip文件。

我提取了每種字體的ttf文件。

在我的CSS文件，我把下面的字體面：

@font-face { 
    font-family: 'Antic Slab'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Antic Slab'), local('AnticSlab-Regular'), url(AnticSlab-Regular.woff)  format('woff'); 
} 

@font-face { 
    font-family: 'Antic'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Antic'), local('Antic-Regular'), url(Antic-Regular.woff) format('woff'); 
}

不過，我使用的字體在下面的CSS規範：

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Antic Slab', serif; 
    font-weight:bold; 
    line-height:1.0em; 
} 

p 
{ 

     font-family: 'Antic', sans-serif; 
     font-size:1.2em; 
     line-height: 1.5em; 
     margin:0 0 0.5em 0; 
}

然而，字體無法顯示當我部署網站時。

有人請提出一些建議，以確保我的網站能顯示字體嗎？

來源

2013-04-30 user1338998

您提取了ttf文件，但您的代碼引用了woff文件。那麼你是否真的創建了woff文件？用什麼？您需要提供更多信息。包含URL是個好主意，因爲它可以讓人們立即看到字體文件是否存在以及它們包含的內容。 – 2013-05-01 06:01:56

感謝@尤卡-K-korpela和@Diegys

我對於爲Web應用程序配置字體真的很新穎。

這就是我所做的。

下面是與古玩板和安蒂奇谷歌的字體相關的谷歌網頁：

http://www.google.com/fonts#UsePlace:use/Collection:Antic

http://www.google.com/fonts#UsePlace:use/Collection:Antic+Slab

我下載與古玩板和安蒂奇從谷歌的字體相關的zip文件。

我解壓縮zip文件，並得到ttf文件。

我處理的TTF文件上傳他們到字體松鼠網頁字體生成，以獲得WOFF文件，埃託奧文件等

下面是字體松鼠網頁字體生成的網址：

http://www.fontsquirrel.com/tools/webfont-generator

而且，這裏有被放置在我的CSS文件的頂部@字體面對面的CSS代碼：

@font-face { 
    font-family: 'Antic Slab'; 
    font-style: normal; 
    font-weight: 400; 
     src: url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular- webfont.eot'); 
    src: url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular- webfont.eot?#iefix') format('embedded-opentype'), 
     local('Antic Slab'), local('AnticSlab-Regular'), url(/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular-webfont.woff) format('woff'), 
     url('/styles/AnticplusSlab/fontsquirrelwebfontgenerator/anticslab-regular- webfont.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'Antic'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.eot'); 
    src: url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.eot?#iefix') format('embedded-opentype'), 
      local('Antic'), local('Antic-Regular'), url(/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.woff) format('woff'), 
     url('/styles/Antic/fontsquirrelwebfontgenerator/antic-regular-webfont.ttf') format('truetype'); 

}

字體將正確顯示在我的Web應用程序中。

來源

2013-05-01 21:27:23 user1338998

那是爲我做的。謝謝！ – smr5 2015-06-10 07:35:50

爲什麼要下載它？您可以使用由谷歌託管的版本：

<link href='http://fonts.googleapis.com/css?family=Antic' rel='stylesheet' type='text/css'>

而在這之後用它在你需要它：

font-family: 'Antic', sans-serif;

來源

2013-04-30 21:34:42 Diegys

我更喜歡將它放在我們自己的服務器上。我寧願不下載它。因此，如果我下載它，請告訴我如何使用這些字體？我相信主要的問題是定義字體。 – user1338998 2013-04-30 22:44:17

如果這適用於除Chrome以外的所有瀏覽器，請將'http'更改爲'https'。 – pgr 2016-03-20 12:28:45

爲什麼Google字體無法顯示在我的網站上？

回答

相關問題