だから、このビデオは成功のフォントに焦点を当て、明らかに楽しいし、Webページのためのフォントを選ぶことは本当に重要です。
しかし、フォントやテキストに関連する他の多くのプロパティもカバーします。
そして、それらは、フォントファミリのフォントサイズフォントの太さの行の高さのテキストラインとテキストの装飾です。
だから、このビデオでは、それらのすべてを止めてカバーするつもりです。
そして、私たちがまずやるべきことは、簡単なテキストを手に入れてスタイルをつけることです。
だから私はジムMファイルであるシンプルなファンクを持っています。私は先に進み、あなたの口に追加します。
だから私はヘッダーとスタイルを見ることができるようにH-1をやるだけです。
そしていくつかのパラグラフ。
だから、私はこのフォントのデモページを呼んで、次のものを、むしろランダムな言葉や、実際には英語のようなものをページに映し出すようなちょっとしたものを入力するのではなく、
私はLorem Epsomジェネレータを使用します。
ですから、Lorem Ipsumジェネレータが英語の単語であるランダムなテキストを生成するのに使用されているかどうかわからない人は、
それはまったく意味がありませんが、少なくとも現実の言葉のように見えます。
したがって、プレースホルダーのテキストです。
だから私はそれは、Webデザイナーのための最高または最も陽気なLorem Ipsumジェネレータの10のオープンな面白い記事のようなものがあります。
私はこの最初のベーコンipsumと一緒に行くつもりですので、私はここでいくつかの段落を生成するつもりです。
クイック。
私にベーコンを与えて、あなたはそれが私にいくつかのテキストを与えることがわかります。
しかし、これは実際にあなたがWebサイト上にあると知っている可能性のように見える実際のテキストです。
このようにちょっと変わったようには見えません。
だから、それはフォントのより良い表現です。
だから私は先に進んでそれを貼りつけるつもりです。
私はこれから2つの段落を作るつもりです。
大丈夫。
そして今はそのままにしておきます。少し後で追加して戻ってきます。
これを開いて、私たちが持っているものを見てみましょう。
OK。
ここではスタイリングするサイトを紹介します。最初に行うことは、実際に何かにフォントを割り当てるだけです。
そしてそれを行う前に、私たちがブラウザで利用可能なフォントについても話す必要があります。
だから、ブラウザでコンピュータが利用可能なフォントは簡単にはわかりません。
それは、それらがすべてのマシンで異なっているからです。
私はここにこのサイトを開いています。
彼女はフォントがスタックしていると言います。
それはあなたがMacかWindowsかどうかに応じて実際に表示されます。
与えられたフォントを持つマシンのパーセンテージはどれくらいですか？
そして、これらは標準のウェブフォントのようなもので、多くの時間を見ることができます。
だから、Helveticaのようなものを見ると、すべてのMacにアメリカがあるが、インストールされているウィンドウはほとんどないことがわかる。
これらはシステム上にあるシステムフォントです。
だからあなたが使うことができる唯一のフォントではありませんが、これらはもっと安全な賭けです。
だから、マシンごとに確実に動作することが分かっていれば、Arial blackやairialのように選ぶだろう。
明らかにこれらのフォントはかなり制限されています。
そこで、このビデオの後半で実際にカスタムフォントをどのように組み込むかを見ていきます。
しかし今のところ、これらのうちの1つを選んでみましょう。
それでは、アリエル・シャロン・アリエルと一緒に行きましょう。
それを使用するには、ここでそれを段落に割り当てます。
だから私はここにリンクしている私のC Sに入るつもりです。
スタイルはC S Sであり、プロパティはフォントファミリと呼ばれます。
だから私は段落を選ぶつもりだし、フォントファミリはArialだと言うつもりだ。
私がリフレッシュすると、ここにArialフォントがあることがわかります。
私はまた、これを完全に有効に引用符を置くことができる簡単なメモ。
時には、最初に数字のあるフォントを持っている場合は、これを行う必要があります。
これは本当のフォントではありませんが、これが有効なCSSA行ではないため、引用符を付ける必要があります。
OK、私はそれにAerielを与えることができ、あなたはAerielを得ることができます。
だからあなたが周りに遊ぶことができる他のフォントがあります。
ジョージアを試してみましょう。
ですから、私たちのH-1ジョージアにリフレッシュしてみましょう。
そして、あなたはそれがフォントを変えるのを見ることができるので、デザイナーなら絶望しないでください。
より多くのフォントを使用する方法とカスタムフォントを含める方法を見ていきます。
しかし今のところ、少しだけ制限されている組み込みのシステムのデフォルトフォントに焦点を絞るつもりです。
それでも、マシンの100％が持っていることは分かりませんので、私が話したい次のプロパティはフォントサイズです。フォントサイズは、フォントの大きさや大きさを制御するようなものですフォントは指定された要素のものです。
だから私たちは何かを選んでH-1にやってみましょう。それぞれをもっと大きくしましょう。
だから私たちはフォントのサイズをして、私たちが使うことができる別のユニットがあります。
最初のものはピクセルまたはピークと呼ばれています。これまでForderで少し見たことがあります。
だから、私たちは200枚の写真のような大きなものを与えようとしています。ブラウザに戻れば、この巨大な楽しみを200ピクセルだけ得ることができます。
フォントサイズで遊びたいのであれば、どれくらいの大きさにしたいのか分かりません。
私たちはそれを検査してからここに行くことができ、これをクリックすることができます。この番号を変更して、100または60または85に変更するか、または私たちが望むものを変更できます。その変化は直ちに反映された。
あなたがフォントサイズで遊んでいるとき、それは本当に素晴らしい機能です。
だから私が言及したように、これはフォントサイズを選ぶ唯一の方法ではありません。
唯一のユニットではありません。
IEMと呼ばれる別の一般的なユニットがあり、E-Mは基本的に相対的なフォントサイズです。
だから私は先に進んでフォントサイズMを開きます。
Dとページを開いてEMセクションに移動し、ここからEM値のサイズが動的でEMが問題の要素の親に適用されるフォントのサイズと等しい。
それが本当に意味するのは、私はあなたに素早い例を示すつもりです。
私がストリップステーキの下にここに入るようにしたら、私はスパンが持つ全てのスパン要素を入れます。
これはおそらく私たちが最初に見ているものです。
それは実際に視覚的に違いを生ずることなくテキストをまとめてグループ化する単なる方法なのですか。それは単語ストリップステーキの周りに要素を作る方法です。
しかし、私はリフレッシュする場合。
何も変わりません。
まあ、フォントサイズの検索は何も変わらず、ここで私はこのスパンを持っています。
だから、いくつかの行を強調表示したり、取り消したりして、それに何かをする方法です。
そして、それをもっと大きくするつもりです。
したがって、E-Mを使用するか、E-M単位を使用します。この段落のフォントの2倍にしたいと思っているのですか？
それでは、フォントサイズ2と言います。 0
E-Mなので、これはこの段落である親要素の囲む要素のフォントサイズの2倍になるでしょう。
だから、もし私がこのスパンをリフレッシュすると、このフォントサイズの倍のフォントが表示されます。
しかし、実際にピクセル数を明示的に指定していませんでした。
これがどれだけ大きかったのか分かり、それを倍増させました。
これは動的なので、それが好きな人の多くは何らかの理由で私がフォントサイズを変更する必要があれば、自動的にこれが変わるということです。
だから、別の例を見せてあげましょう。
段落のフォントサイズのフォントサイズを大きくして40ピクセルにしてみましょう。これはまだ2倍のままであることがわかります。
ですから、E-Mについての1つの質問は、vの初期値は何ですか、そして、何がトップレベルなのかです。
親とその親から継承し続けることはできないので、真実の源がなければなりません。
非常に最上位レベルの要素のように、実際にはフォントサイズがあり、実際にはブラウザに応じて少し変わってしまいます。
しかし、SDNによれば、それは通常約16ピクセルなので、保証はありませんが、通常は約16ピクセルです。
だから、ほとんどの人がやることは、当初、身体のフォントサイズを設定することです。
だからこのボディのフォントサイズのようなもの。
それでは、10ピクセルのように始めるには本当に小さいものを作ってから、それを体より5倍大きくなるように変更しなければなりません。
それは5つのポルノE-Mのように見えるでしょうし、私たちはパラグラフを体の2倍の大きさにします。
だから2。 0 E-M。
最後に、私たちのスパンが段落の2倍になるようにします。
それも2です。 0は内部にネストされているので覚えています。
それで、段落の外にあるテキストをそのようにしてみましょう。あなたはそれがかなり小さいことがわかります。
そして、これよりも5倍も大きくしました。
私たちはこれを2倍にしました。
これは段落の2倍です