web-dev-qa-db-ja.com

ウェブサイトのフォント埋め込み、クロスブラウザ機能に最適な方法はどれですか？

私のクライアントは、特定のフォントをWebサイトで使用するように要求することがあります。私はCSS @font faceを使用して埋め込みを試みましたが、クロスブラウザにはあまり適していません。 Googleフォントを使用することもありますが、まったく同じではありません。

可能な限り最も多くのクロスブラウザ機能を備えたフォントを埋め込む最適な方法を知っている人はいますか？ Wordpressのような制御管理システムにはありません。

cssfontscross-browser
1
Paddy

Googleオプションは適切ですが、最適なオプションは@font-faceです。ほぼすべてのブラウザー（Opera Miniを除く）でサポートされています。これは、「 使用可能 」で確認できます。一部のフォントがブラウザーで異なってレンダリングされる問題については、フォントに最適な設定を見つける必要があります。 ChromeのLatoのように、一部のブラウザーのレンダリングはひどく軽いです。ここに私が最高に機能していると思う設定があります：

@font-face {
    font-family: 'Lato';
    src: url('/content/Fonts/Lato-Light-webfont.eot');
    src: url('/content/Fonts/Lato-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/content/Fonts/Lato-Light-webfont.woff') format('woff'),
         url('/content/Fonts/Lato-Light-webfont.ttf') format('truetype'),
         url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
    font-weight: 300;
    font-style: normal;
    text-rendering: antialiased;
}

次に、Webkitブラウザーで使用するためにsvgフォントを追加します。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Lato';
        src: url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
        font-weight: 300;
        font-style: normal;
        text-rendering: antialiased;
    }
}

実験、これが最良の方法であり、設定はフォントごとに異なります。

2
user2406735

私が与えているものよりも良い答えがあればいいのですが、あなたの最善の策は、サーバー側のスクリプトを使用してユーザーのWebブラウザを決定し、ブラウザに応じて...

Netscape 4.xxのように古い場合：

Htmlフォントタグを使用して、必要なフォントとフォントのサイズを定義できます。参照： http://www.w3schools.com/tags/tag_font.asp

ブラウザが新しいため、ほとんどの場合のようにフォントタグを適切に処理できない場合は、CSSでフォントを定義する必要があります。

PHPを使用した例を次に示します。

<?php
$browser=$_SERVER['HTTP_USER_AGENT'];
$old=0; //assume new browser
if (strpos($browser,"netscape") > -1){$old=1;}
if (strpos($browser,"IE3.0") > -1){$old=1;}
if ($old==1){
//old browser HTML 
?>
<font face="verdana">This is verdana font</font>
<?php
}else{
//new browser HTML
?>
<p style="font-family: verdana;">This is verdana font</p>
<?php
}
?>

私が示したもの以外の特定のフォントについては、verdanaをその特定のフォントのフォント名に置き換えることができますが、ユーザーはシステムにその適用可能なフォントファイルがあることを確認する必要があります。次善のフォント。

0
Mike