質問
この質問にはすでに答えがあります:
- HTML にフォントを埋め込むにはどうすればよいですか? 6 件の回答
Web 開発者が利用できるフォントのコレクションは憂鬱なほど限られています。私はずっと前に、Web サイトと一緒にフォントを配布する方法として TrueDoc について読んだことを覚えていますが、それは衰退したようです。誰かこれまたは類似のものを使用したことがありますか?十分な数のブラウザでサポートされていますか?良い解決策が見つからないのでしょうか?
責任ある Web 開発者は、Windows (および Windows) でのみ利用可能なフォントを使用しないことに注意してください。 特に Vista でのみ利用できるものなど)、少なくとも大部分のブラウザでサポートされていないテクノロジも使用していません。
アップデート: 何人かの人が指摘しているように、あなたが使用している特定のフォントを持っていない人のために代替フォントのリストを提供することに何も問題はありません。実際、私はいつもそうしていますが、これが間違っているというつもりはありませんでした。
私の質問の表現は悪かったですが、私が言いたかったのは、デザイナーはクライアントが利用できるものについてあまり多くのことを想定すべきではないということです。独自の設定を使用しているユーザーだけでなく、すべてのユーザーがサイトをどのように閲覧するかを計画する必要があります。
解決
Safari、および程度は低いですが、Firefox 3 は以下をサポートしています。 @font-face
CSS でカスタム フォントを使用できるようになります。ただし、フォント ファイルを配布するには適切なライセンスが必要です。これらの記事で詳しく説明しています。
他のヒント
これはタイムリーなスレッドです。Calibri は他の代替フォントと比べてかなり小さいため、Arial に切り替えました。Arial は Helvetica のクソコピーなので、(ギャグ) Arial に切り替えるのは非常に苦痛でした。
http://www.ms-studio.com/articles.html
サイズ変更の難しさ (「c」フォントを標準として使用すると大きすぎます。通常のものを使用すると小さすぎる)については、ここで詳しく説明します。
http://neosmart.net/blog/2006/css-vistas-new-fonts/
Calibri の手作業で調整された美しい RGB エイリアシングがとても恋しくなるでしょうが、Calibri のインストールを要求せずに、ほとんどのユーザーに優れたエクスペリエンスを提供することは不可能でした。Office 2007 (Win/Mac)、そしてもちろん Vista にも付属しているため、これはかなり一般的です。しかし、それは普遍的とは程遠いため、世界中の Web 視聴者に対してこれに大きく依存するのは少し無責任です。
もちろん使えます シフラ.
これは、それをサポートしていないブラウザでは正常に機能を低下させ、アクセスできます。
大量のテキストに使用するのにはあまり適していませんが、見出しやテキストのハイライトには最適です。
もちろん、これは現時点でのブラウザーと Web の本質的な制限に対する回避策ですが、これが大部分の Web テクノロジーやテクニックに当てはまらなかったのはいつ頃でしょうか。
新しいものでそれができます @font-face
宣言 CSS3で利用可能です。CSS3 機能のサポートが非常に優れています (つまり、IE4以降)も同様です。
一般的な構文は次のとおりです。
@font-face {
src: url('フォントへのパス') format('woff|ttf|svg|eot|…');
font-family: 使用する名前;
font-weight: オプションの重り;
font-style: オプションのスタイル;
}
それもあります 利用可能な発電機 フォントを複数の形式に変換し、適切な CSS を作成します。
現在では、WOFF ファイルのみを提供することをお勧めします。便利ですよ、 簡単に作成できます.
また、必ずフォーマット名を引用符で囲んでください (例: format('woff')
);そうしないと、Firefox では動作しません。
責任あるWeb開発者は、Windows(特にVistaでのみ利用可能なもの)でのみ利用可能なフォントを使用しておらず、少なくともブラウザの大部分でサポートされていないテクノロジーも使用していないことに注意してください。
広く利用可能なフォントに正常に降格する限り、Windows/Vista 固有のフォントを使用することに問題はありません。例えば:
font-family: Calibri, Tahoma, Helvetica, Sans-Serif;
実際、それが重要なのです!
CSS2 は以下を提供します:
@font-face {
font-family: Garamond;
src: url(garamond.eot), url(garamond.pfr);
}
責任ある Web 開発者は、Windows でのみ使用できるフォント (特に Vista でのみ使用できるフォント) を使用したり、少なくとも大部分のブラウザーでサポートされていないテクノロジを使用したりしないことに注意してください。
これはかなり的外れだと思います。そうしたとしても問題ありません。誰もが簡単に読める賢明なものを手に入れることができ、必要な人はフォントを好きなものに変更できます。なぜなら、それは単なるテキストであり、すべての主要なブラウザでは、サイト設計者の好みに関係なく、表示されるフォントをカスタマイズできるからです。
一部のユーザーが持っていないフォントを CSS で提案することに問題はありません。彼らはあなたとは違うものを見ているだけです。違うのは壊れない。彼らは、他の人が何か違って見えることを知らないので、なぜデフォルトのフォントを使用しているのか疑問に思うことさえありません。
これがフォント セットの要点です。
Verdana, Arial, Helvetica, sans-serif
人によって見方が異なることを認識しているからこそ、これは良い習慣となるのです。
これも良い習慣です。
Gill Sans, Verdana, Arial, Helvetica, sans-serif
つまり、ほとんどの人はギルを持っていません – 誰が気にするでしょうか?それにもかかわらず、彼らは完全に良いサイトを手に入れました。
これも問題ありませんが、少し奇妙で怠惰です。
Gill Sans
無責任なWebデザインとは、altテキストを使用せずにテキストを画像として設定したり、フォントセット内の興味深いフォントを使用したりすることです。
IEのサポート @font-face
(これは MS Word の独自技術として始まりました)。 これについては、ちょうど 1 か月前に IE チームが投稿したブログ記事です。.
責任ある Web 開発者は、Windows でのみ使用できるフォント (特に Vista でのみ使用できるフォント) を使用したり、少なくとも大部分のブラウザーでサポートされていないテクノロジを使用したりしないことに注意してください。
まあ… Vista や Windows 以外の OS でどのようにレンダリングされるかを知っていれば、それは可能です。
さもないと:そう、CSS2 の @font-face は、たとえ広くサポートされていないとしても、最良の標準代替手段です。
Web ページと一緒にフォントを送信するどの方法でも、何らかのセキュリティ リスクが生じると思います。クライアントが必要なフォントを持っていない場合に、テキストを画像またはフラッシュ表示のようなものに動的に置き換えることができる方法について聞いたことがあります。私が今見つけられるこのようなものは次の場所だけです Aリストアパート しかし、すでに冗長になっている可能性があります。この方法では、CSS、画像、JavaScript が機能する必要があり、ブラウザーをまたいで実装するのは困難な場合があります。