7

私はウェブページにフォントを埋め込む方法を理解しようとたくさんググった。私が理解しているように、フォントを.ttfおよび.eot形式でWebページにアップロードする必要があります。そして、スタイルシートで@font-faceを使用します。

Kingthings_Italique.eotとKingthings_Italique.ttfをWebページのルートに配置しました。

このようなスタイルシートを作成します。

.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" />

そして、私はそれをこのように使おうとします

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

しかし、ie8とchrome2のどちらを使用しても、フォントは変更されません。

http://randsco.com/?p=680&more=1&c=1正解を理解していれば、それは可能であるはずです。

IE8でソースを開いた場合、フォント名を表示できるはずですか？IE8コードでキングを検索しても、何も見つからないためです。

4

9 に答える 9

10

埋め込みフォント機能を（それをサポートするブラウザで）機能させるには、新しいフォントファミリをスタイルセレクタに適用する必要もあります。

例えば

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-23T00:13:04.080 に答える
1

これは実際にはあなたができることでも、すべきことでもありません。Webの大部分は、いくつかの基本的なフォント（serif、sans-serifなど）に落ち着いており、決定するのはブラウザー次第です。複数のフォントを指定して、使用できない場合はブラウザをダウングレードすることができます。

font-family: Kingthings Italique, sans-serif

これはおそらく最良の戦略です。表示されるフォントがあれば、それ以外の場合は汎用フォントになります。

于 2009-09-05T09:42:57.977 に答える
1

広くサポートされていないため、@ font-faceの使用はまだ推奨されていませんが、最新のブラウザ（ほとんどのブラウザ）でカスタムフォントを使用する方法があります。ただし、古いブラウザで正常に機能を低下させるためのバックアップソリューションを提供することを忘れないでください。

とにかく、詳細についてはこのチュートリアルを確認する必要があります。

于 2009-09-05T13:23:55.893 に答える
0

まず、絶対パスを使用してみてください。

url('/Kingthings_Italique.ttf')

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
于 2009-09-05T16:30:04.983 に答える
0

この質問はかなり古いと思いますが、Googleの優れたフォントAPIがあり、https<link>：//developers.google.com/webfonts/にアクセスできます。

于 2012-07-29T05:42:20.603 に答える
0

AFAIK、純粋なCSSを使用したフォントの埋め込みは、ほとんどのブラウザでは（まだ）実際にはサポートされていません。

ただし、他の解決策もあります。javascriptを使用してもかまわない場合は、cufonをチェックしてください。cufonはSVG / VMLを使用して、現在使用されているほとんどのWebブラウザー（IE6も含む）でフォントをレンダリングします。

于 2009-09-05T09:42:10.013 に答える
0

CSSを使用したフォントの埋め込みは、最新のWebブラウザでは機能しないはずです。より正確には、CSSを使用したフォントの埋め込みはCSS2の一部であり、一部のブラウザーでサポートされていましたが、CSS2.1では撤回されました（実際にはCSS2の現在の仕様からも削除されています）。

ブラウザがCSS3のサポートを開始すると、CSS3でのフォントサポートの復活を期待してください。Firefox 3.5、Opera 10、およびSafariは、TTFフォントを使用したCSS3スタイルのフォント埋め込みをサポートすることが期待されています。Chromeは、何らかの理由でSafariのCSS3フォント埋め込みのサポートを備えていません。

IE8でフォントをレンダリングする際の問題は、2番目のfont-face宣言が最初のフォントファミリと同じフォントファミリを定義し、したがってそれをオーバーライドするという事実に関連している可能性がありますが、IEが使用できるeotフォントを宣言していません。

次のような単一のフォント面定義を使用することをお勧めします。

@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が「代替ソース」定義を処理できることを前提としていますが、それが処理できるかどうかはわかりません。MSDNの@font-faceドキュメントではそれを参照していません。

于 2009-09-05T10:23:55.517 に答える
0

1つのフォントファミリに対して多くのソースを持つ@font-face宣言を1つだけ持つべきだと思います。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ファイル用である必要があります。2番目のソースはTTFファイル用で、ローカルフォント名で始まる必要があります。それはある種のハックです。2番目のソース属性はIEに対して無効に見えるため、このブラウザーは最初の属性を使用します。他のブラウザでは両方とも有効ですが、最後のものだけが使用されます。

TTFファイルをEOTに変換するために、私はこの小さなプログラムを使用しました： http ://code.google.com/p/ttf2eot/

このメソッドは、次のブラウザでサポートされている必要があります。

  • Firefox 3.6 +
  • Internet Explorer 4 +
  • オペラ10.00+
  • Chrome 4.0 +
  • Safari 3.1 +

私はいくつかのテストを行い、それは私のために働いています。Chrome2はおそらく古すぎます。

于 2010-02-12T21:12:05.187 に答える
0

IEブラウザと非IEブラウザの両方で埋め込みフォントをサポートするには、ブロックする必要があります。

IEブロックは2番目に来て、IEセレクターコメント内に含まれる必要があります。

例えば：

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

これは、IE（Firefox、Safari、Chromeなど）を除くすべての最新のブラウザーで機能します。IEを動作させるには、次のものが必要です。

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

コメントifステートメントは、IE5以降でIEによってのみ読み取られます。これは、IEに特別な指示を与えるのに最適です。他のブラウザでは、コメントアウトされたテキストだけがレンダリングされません。

.ttfフォントの.eot形式がない場合は、次のURLにアクセスでき ます。http： //www.kirsle.net/wizards/ttf2eot.cgi非常に使いやすく、.eotフォントを生成します。すぐに。

私の答えが気に入ったら+1。私が何かを改善する必要があると思うならコメントしてください:)

于 2010-11-17T17:33:50.437 に答える