2

ASP.NET C# Web アプリケーションは、次の環境で使用されます。NET Framework 4

ASP.NET Web フォーム。

IIS7

Windows 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-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;
}

ただし、Web サイトをデプロイすると、フォントが表示されません。

フォントが私のウェブサイトに確実に表示されるようにする方法について、誰か提案してもらえますか?

4

2 に答える 2

2

ありがとう@jukka-k-korpelaと@Diegys

Web アプリケーションのフォントを構成するのは初めてです。

これが私がしたことです。

Antic Slab および Antic google フォントに関連付けられている google Web ページは次のとおりです。

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

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

Antic Slab と Antic に関連する zip ファイルを Google フォントからダウンロードしました。

zipファイルを解凍し、ttfファイルを取得しました。

woffファイル、etoファイルなどを取得するために、ttfファイルをfont squirrel web font generatorにアップロードして処理しました。

font squirrel Web フォント ジェネレーターの URL は次のとおりです。

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 に答える