web-dev-qa-db-ja.com

フォントフェイスとローカルの「Segoe UI」フォント

ユーザーのコンピューターにインストールされているWebサイトで「Segoe UI」フォントを使用したい。

@font-faceプロパティを使用してフォントの太さを変更するために、すべてのスタイルをfont-weightで宣言しました（これは本当にクールな機能です！）。

問題は、Segoe UI Bold（名前が間違っていると思います）で動作しないことです。何か案が？

ここに例があります。 （4）と（5）は同じです： http://jsfiddle.net/kxHQR/1/

@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

/* ... */

BODY {
 font-family: 'Myname';    
}

.boldtext {
    font-family:'Segoe UI';
    font-weight:700;
}

<p style='font-weight:300'>1. Text with font-weight:300. OK</h1>
<p>2. Here is normal text. OK</p>
<p style='font-weight:600'>3. Text with font-weight:600.  OK</p> 
<p style='font-weight:700' >4. Text with font-weight:700. It must be like (5), but it is like (3). :(</p>
<p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p>
cssfontsembedfont-facetypography
17
Daniel G. Blázquez

これはMicrosoft独自のものです Windows 8（Metro）アプリのスタイルシート ：

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

上記のアプローチは私のために機能し、Open SansおよびGoogleフォント。ただし、元々Paul Irishによる this アプローチの正反対です。

@font-face {
    font-family: 'ChunkFiveRegular;
    src: url('whatever source');
    font-weight: normal;
    font-style: normal;
}

Paul Irishのアプローチでは、CSSの後半でウェイトとイタリックを設定できます（読み取り：必須）が、結果は「偽物」になります。ブラウザはファミリ内のすべてのフォントを持っているわけではないので、それを補うためのキャラクター自身。 Paulのアプローチにおける唯一の制限された強みは、すべてのブラウザーでフォントをmightリセットすることです（ただし、使用中のフォントに依存します）。

必要なfont-stylesとfont-weightsを指定できるため、Microsoftのアプローチのほうが好きです。ブラウザは、太字や斜体のサイズを計算する代わりに、正しいフォントファイルを表示します。ただし、使用するファミリのすべてのフォントバリエーションに対してフォントファイルを提供する必要があります。

最終的には、使用するフォントとその使用方法（異なるウェイト、斜体など）にすべて依存します。どのアプローチを採用するかに関係なく、すべてのWebタイポグラフィの取り組みに FontSquirrelのfont-face generator を使用することを、私自身の経験から（およびPaul recommends も）推奨します。 FontSquirrelは、不要な文字セットを除外したり、フォントを圧縮したりするなどして、フォントサイズを大幅に削減できます。

27
pilau

基本的なアプローチは論理的ですが、ブラウザはフォントデータの処理が異なることが原因で明らかに問題があるようです。以下は、異なる重みのSegoe UIを使用する最も効果的な方法のようです。

  1. ライトの場合は、font-family: Segoe UI Lightを使用します
  2. 通常は、font-family: Segoe UIのみを使用します
  3. 半太字の場合は、font-family: Segoe UI Semiboldを使用します
  4. 太字の場合は、font-family: Segoe UI; font-weight: boldを使用します

これは面倒で非論理的ですが、Firefox、Chrome、IE、Opera、Safari（Win 7でテスト済み）で動作します。

Webページでは、おそらく、異なる重みを持つ適切なフリーフォントを見つけて、@font-face経由で使用することをお勧めします。結局のところ、Segoe UIは普遍的とはほど遠く、適切なフォールバックを設定する簡単な方法はありません。

8
Jukka K. Korpela
@font-face {
    font-family: 'Segoe UI';
    src: url('./ui/segoeui.eot');
    src: local("Segoe UI"),
         local("Segoe"),
         local("Segoe WP"),
         url('./ui/segoeui.eot?#iefix') format('embedded-opentype'),
         url('./ui/segoeui.woff') format('woff'),
         url('./ui/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/semibold/seguisb.eot');
    src: local("Segoe Semibold"),
         local("Segoe WP Semibold"), 
         url('/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/semibold/seguisb.woff') format('woff'),
         url('/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/bold/segoeuib.eot');
    src: local("Segoe Bold"),
         local("Segoe WP Bold"),
         url('/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/bold/segoeuib.woff') format('woff'),
         url('/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/light/segoeuil.eot');
    src: local("Segoe UI Light"),
         local("Segoe WP Light"),
         url('/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/light/segoeuil.woff') format('woff'),
         url('/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

ダウンロード：

https://github.com/KingRider/frontcom/tree/master/css/fonts

5
KingRider