193

サイトでカスタムフォントを使用している新しいWebサイトをいくつか見ました（通常のArial、Tahomaなどを除く）。

そして、それらはかなりの量のブラウザをサポートします。

どのようにそれを行うのですか？可能であれば、人々がフォントを無料でダウンロードすることもできなくなります。

4

8 に答える 8

395

一般的に、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が提供する無料のWebフォントの素晴らしいセットを見つけることができます（自動生成されたCSS@font-faceルールもあるので、独自に作成する必要はありません）。

可能であれば、人々がフォントを無料でダウンロードすることもできなくなります。

いいえ、CSSを介して埋め込まれたカスタムフォントを使用してテキストのスタイルを設定することはできませんが、他のユーザーがテキストをダウンロードすることはできません。画像、Flash、またはHTML5 Canvasを使用する必要がありますが、これらはすべてあまり実用的ではありません。

お役に立てば幸いです。

于 2012-08-27T14:39:58.143 に答える
33

フォントがクロスブラウザ互換であることを確認するには、次の構文を使用していることを確認してください。

@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'); 
}

ここから撮影。

于 2013-06-18T02:44:06.867 に答える
26

フォントファイルをダウンロードしてCSSにロードする必要があります。

FeWebアプリケーションでYanoneKaffeesatzフォントを使用しています。

を介してロードして使用します

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

私のスタイルシートで。

于 2012-08-27T14:33:02.497 に答える
15

現在、Webで使用されているフォントコンテナ形式は4つありますEOT, TTF, WOFF,。WOFF2.

残念ながら、幅広い選択肢があるにもかかわらず、すべての新旧のブラウザで機能する単一のユニバーサルフォーマットはありません。

  • EOTはIEのみであり、
  • TTFは部分的なIEをサポートしています。
  • WOFFは最も幅広いサポートを享受していますが、一部の古いブラウザでは利用できません
  • WOFF 2.0のサポートは、多くのブラウザで進行中の作業です。

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;
  }
于 2017-04-12T10:03:51.620 に答える
4

Google.com/webfontsまたはfontsquirrel.comで気に入ったフォントが見つからない場合は、作成したフォントを使用していつでも独自のWebフォントを作成できます。

ここに素晴らしいチュートリアルがあります：あなた自身のフォントフェイスウェブフォントキットを作ってください

誰かがあなたのフォントをダウンロードするのを防ぐことについてはよくわかりませんが。

お役に立てれば、

于 2012-08-27T14:34:04.510 に答える
4

CUFONと呼ばれる興味深いツールもあります。このブログ でそれを使用する方法のデモンストレーションがありますそれは本当にシンプルで面白いです。また、生成されたコンテンツをctrl + c / ctrl+vすることはできません。

于 2012-08-27T15:51:41.980 に答える
1

私はWin8に取り組んでおり、このコードを使用します。IEとFF、Operaなどで動作します。私が理解したのは、woffフォントは軽量でGoogleフォントでは一般的です。

前にttfフォントをwoffに変換するには、ここにアクセスしてください。

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
于 2016-03-20T08:53:34.200 に答える
0

まず第一に、それがあなたのものであり、それが通常数ヶ月かかる場合を除いて、人々がフォントをダウンロードするのを防ぐことはできません。そして、人々がフォントを使用するのを防ぐことは意味がありません。Webサイトに表示されるフォントの多くは、以下で説明するような無料のプラットフォームで見つけることができます。

しかし、あなたがあなたのウェブサイトにフォントを実装したいなら、これを読んでください：あなたのウェブサイトにフォントを実装する ための非常に簡単で自由な方法があります。無料で使いやすいので、Googleフォントをお勧めします。たとえば、GoogleのBangersフォントを使用します。（https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers）次のようになります 。HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
于 2020-04-23T18:44:32.910 に答える