css - フォントフェイスとローカルの「SegoeUI」フォント

Question

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

@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>

score 30 · Accepted Answer

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

/*
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");
}

上記のアプローチは私にとってはうまくいき、 OpenSansとGoogleフォントで使用されているアプローチでもあります。ただし、これはこのアプローチの正反対であり、元々はPaulIrishによるものです。

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

Paul Irishのアプローチでは、CSSの後半で重みとイタリックを設定できます（読み取り：必須）が、結果は「偽物」になります。ブラウザにはファミリ内のすべてのフォントがないため、ブラウザの重みと形状を計算する必要があります。それを補うためにそれ自体で文字。Paulのアプローチの唯一の、そして限られた強みは、すべてのブラウザでフォントをリセットする可能性があることですが、使用しているフォントによって異なります。これは、すべてのブラウザでフォントのレンダリングが異なるためです。

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

結局のところ、それはすべて、使用するフォントとその使用方法（さまざまな太さ、斜体など）に帰着します。どのアプローチを採用するかに関係なく、私自身の経験から（そしてPaulも推奨します）、すべてのWebタイポグラフィの取り組みにFontSquirrelのフォントフェイスジェネレーターを使用することをお勧めします。FontSquirrelは、不要な文字セットを除外したり、フォントを圧縮したりすることで、フォントサイズを大幅に縮小できます。

score 8 · Accepted Answer

基本的なアプローチは論理的ですが、ブラウザはフォントデータの処理が異なるために、問題が発生しているようです。SegoeUIのさまざまな重みを使用する最も効果的な方法は次のようです。

光の場合は、font-family: Segoe UI Light
通常の場合は、font-family: Segoe UI
セミボールドの場合は、font-family: Segoe UI Semibold
太字の場合は、font-family: Segoe UI; font-weight: bold

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

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

score 6 · Accepted Answer

@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

css - フォントフェイスとローカルの「SegoeUI」フォント

3 に答える 3

Related

Reference