2

我们的 ASP.NET C# Web 应用程序用于以下环境 .NET Framework 4

ASP.NET Web 窗体。

IIS 7

视窗 2008

视觉工作室 2010

.NET IDE C#

HTTPS ( SSL )

我们的项目网页设计师想要使用名为 Antic Slab 和 Antic 的 Google 字体：

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

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

我下载了与 Google 字体相关的 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;
}

但是，当我部署网站时，字体无法显示。

有人可以就如何确保字体显示在我的网站上提出一些建议吗？

4

2 回答 2

2

谢谢@jukka-k-korpela 和@Diegys

我对为 Web 应用程序配置字体真的很陌生。

这就是我所做的。

以下是与 Antic Slab 和 Antic google 字体相关的 google 网页：

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

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

我从谷歌字体下载了与 Antic Slab 和 Antic 相关的 zip 文件。

我提取了 zip 文件，并得到了 ttf 文件。

我通过将 ttf 文件上传到字体松鼠网络字体生成器来处理 ttf 文件，以便获取 woff 文件、eto 文件等。

这是字体松鼠网络字体生成器的网址：

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

此外，这里是放在我的 css 文件顶部的 @font-face 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-01T21:27:23.663 回答
1

你为什么要下载它？您可以使用 Google 托管的版本：

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

然后在需要的地方使用它：

font-family: 'Antic', sans-serif;
于 2013-04-30T21:34:42.110 回答