3

Microsoft のメトロ スタイル (つまり、新しい見通し) に従う Web アプリケーションがいくつかあります。しかし、使用したフォントに問題があります。デフォルトのフォントは「Segoe」ファミリです。ユーザーがデスクトップ フォント Segoe UI を備えたシステムでアプリケーションを入力すると、すべて問題ありません。しかし、場合によっては、ユーザーが "Segoe UI" が付属していない Mac または Ubuntu を使用しており、ナビゲーターが 2 次フォント (私の場合は Tahoma) を使用しています。

新しい Outlook では、使用している OS に関係なく、常に Segoe UI ファミリを使用します (Web フォントを使用していると思います)。

Web フォントを使っていると言う人もいましたが、Segoe ファミリーの Web フォントはどこにも見つかりませんでした (多くの Web フォント サイトを検索しました)。

誰かがこの状況を解決する方法を知っていますか?

4

3 に答える 3

8

まず、ブラウザごとにさまざまな種類のフォントがあります。すべてのブラウザーで確実に動作するようにするには、少なくとも 3 つのタイプ (eot、ttf、woff (および svg)) を配置する必要があります。それらを取得する最善の方法は、リンクの 1 つを使用することです: http://www.fontsquirrel.com/fontface/generator、http://fontface.codeandmore.com/

非常にシンプルで、すぐに使用できるフォントのセットを取得できます。あなたのセットをダウンロードした後、新しいフォントの使用方法を確認できるサンプル ファイルが見つかります。

あなたの場合、次のようになります。

@font-face {
    font-family: 'Segoe';
    src: url('/font_path/Segoe.eot');
    src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
         url('/font_path/Segoe.woff') format('woff'),
         url('/font_path/Segoe.ttf') format('truetype'),
         url('/font_path/Segoe.svg#Segoe') format('svg');
    font-weight: normal;
    font-style: normal;
}

/font_path/この css ファイルに従ったフォントへの相対パスです。通常は../fonts/.

なぜあなたはそれらすべてを必要とするのですか？

ttf、otf - 対象: FireFox、Chrome < 6、Safari、Opera

oet - 対象: Internet Explorer < 9

svg - 対象: Safari Mobile (iPhone、iPad for iOS < 4.2)、Android ブラウザ

woff - 対象: Internet Explorer >= 9、FireFox >= 3.6、Chrome >= 6

Segoe.eot- その他は、これらのフォント ファイルへのリンク (この場合は相対) です。

編集

fontsquirrel.com一部のフォントはレンダリングされず、fontface.codeandmore.com商用に変更されることがあるため、他のフォントについてはグーグルで検索する必要がありますonline font generator。

編集

役に立たない場合fontsquirrel.comは、次を使用してみてください。http://www.font2web.com/

于 2013-01-23T08:22:05.460 に答える
1

フォントが OS で利用できない場合は、CSS を使用してフォントをダウンロードできる場所を指定します。これを CSS ファイルの先頭に追加します。

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.ttf');
}

ttf 形式は、ほとんどのブラウザーで機能します。IE の場合、条件付き IE スタイルシートに eot バージョンの場所を追加します。

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.eot');
}
于 2013-01-23T08:14:51.913 に答える