自分のサイトでカスタムフォントを使っている新しいWebサイトを見たことがあります(通常のArial、Tahomaなどは除く)。
そして彼らはニースのブラウザをサポートしています。
どうやってそれをするのですか?また、可能であれば、人々がフォントをダウンロードするための無料アクセスを持つことを防ぎます。
一般的には、CSSで@font-face
を使用してカスタムフォントを使用できます。これは非常に基本的な例です。
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}
それから、ささいなことに、特定の要素でフォントを使うこと:
.classname {
font-family: 'YourFontName';
}
(.classname
はあなたのセレクタです)。
特定のフォントフォーマットがすべてのブラウザで機能するわけではないことに注意してください。あなたは、 fontsquirrel.com のジェネレータを使って、変換の手間を省くことができます。
あなたは Google Fonts によって提供される無料のウェブフォントの素晴らしいセットを見つけることができます(同じく自動生成されたCSS @font-face
規則を持っているので、あなたはそうする必要はありません自分で書いてください。
また、可能であれば、人々がフォントをダウンロードするための自由なアクセス権を持つことを妨げます。
いいえ、CSSを介して埋め込まれたカスタムフォントを使ってテキストをスタイルすることはできません。画像、Flash、または HTML5キャンバス を使用する必要がありますが、いずれもあまり実用的ではありません。
お役に立てば幸いです。
あなたのフォントがクロスブラウザ互換であることを確認するために、あなたがこの構文を使うことを確認してください:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
ここ からとられています 。
フォントファイルをダウンロードしてCSSに読み込む必要があります。
F.e.私は私のWebアプリケーションで Yanone Kaffeesatz フォントを使用しています。
私はそれをロードして使用します
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
私のスタイルシートに。
CUFON という面白いツールもあります。この ブログでそれを使用する方法のデモンストレーションがあります それは本当にシンプルで面白いです。また、それは人々が生成されたコンテンツをctrl + c/ctrl + vすることを可能にしません。
Google.com/webfontsまたはfontsquirrel.comから好きなフォントを見つけられない場合は、自分が作成したフォントを使って自分のWebフォントをいつでも作成できます。
これがいいチュートリアルです: あなた自身のフォントフェイスWebフォントキットを作ります
誰かがあなたのフォントをダウンロードできないようにすることについては確信が持てませんが。
お役に立てれば、
今日、Web上で使用されている4つのフォントコンテナフォーマットがあります:EOT, TTF, WOFF,
とWOFF2.
残念ながら、幅広い選択肢があるにもかかわらず、すべての新旧のブラウザで機能する単一のユニバーサルフォーマットはありません。
Webアプリケーションがすべてのブラウザで同じフォントを使用するようにしたい場合は、CSSで4つのフォントタイプすべてを指定することをお勧めします。
@font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
私は勝利8に取り組んでいます、このコードを使ってください。それはIEやFF、Operaなどで動作します。
あなたのttfフォントを以前woffに変換するにはここ に行ってください 。
@font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}