1
00:00:01,020 --> 00:00:07,590
だから、このビデオは成功のフォントに焦点を当て、明らかに楽しいし、Webページのためのフォントを選ぶことは本当に重要です。

2
00:00:07,580 --> 00:00:09,880
 

3
00:00:10,110 --> 00:00:14,660
しかし、フォントやテキストに関連する他の多くのプロパティもカバーします。

4
00:00:14,730 --> 00:00:23,470
そして、それらは、フォントファミリのフォントサイズフォントの太さの行の高さのテキストラインとテキストの装飾です。

5
00:00:23,610 --> 00:00:26,530
だから、このビデオでは、それらのすべてを止めてカバーするつもりです。

6
00:00:26,730 --> 00:00:32,670
そして、私たちがまずやるべきことは、簡単なテキストを手に入れてスタイルをつけることです。

7
00:00:33,030 --> 00:00:39,080
だから私はジムMファイルであるシンプルなファンクを持っています。私は先に進み、あなたの口に追加します。

8
00:00:39,080 --> 00:00:42,660
だから私はヘッダーとスタイルを見ることができるようにH-1をやるだけです。

9
00:00:42,750 --> 00:00:44,180
そしていくつかのパラグラフ。

10
00:00:44,490 --> 00:00:51,720
 

11
00:00:51,720 --> 00:00:57,450
 

12
00:00:57,450 --> 00:00:59,580
だから、私はこのフォントのデモページを呼んで、次のものを、むしろランダムな言葉や、実際には英語のようなものをページに映し出すようなちょっとしたものを入力するのではなく、

13
00:00:59,620 --> 00:01:02,610
私はLorem Epsomジェネレータを使用します。

14
00:01:02,610 --> 00:01:08,640
ですから、Lorem Ipsumジェネレータが英語の単語であるランダムなテキストを生成するのに使用されているかどうかわからない人は、

15
00:01:08,730 --> 00:01:09,980
 

16
00:01:09,990 --> 00:01:13,550
それはまったく意味がありませんが、少なくとも現実の言葉のように見えます。

17
00:01:13,560 --> 00:01:15,570
したがって、プレースホルダーのテキストです。

18
00:01:16,110 --> 00:01:23,310
だから私はそれは、Webデザイナーのための最高または最も陽気なLorem Ipsumジェネレータの10のオープンな面白い記事のようなものがあります。

19
00:01:23,310 --> 00:01:24,350
 

20
00:01:24,570 --> 00:01:30,480
私はこの最初のベーコンipsumと一緒に行くつもりですので、私はここでいくつかの段落を生成するつもりです。

21
00:01:31,560 --> 00:01:31,910
クイック。

22
00:01:31,920 --> 00:01:34,370
私にベーコンを与えて、あなたはそれが私にいくつかのテキストを与えることがわかります。

23
00:01:34,470 --> 00:01:41,080
しかし、これは実際にあなたがWebサイト上にあると知っている可能性のように見える実際のテキストです。

24
00:01:41,070 --> 00:01:41,670
 

25
00:01:41,700 --> 00:01:43,430
このようにちょっと変わったようには見えません。

26
00:01:43,440 --> 00:01:45,890
だから、それはフォントのより良い表現です。

27
00:01:46,110 --> 00:01:48,010
だから私は先に進んでそれを貼りつけるつもりです。

28
00:01:48,120 --> 00:01:52,100
私はこれから2つの段落を作るつもりです。

29
00:01:54,140 --> 00:01:54,570
大丈夫。

30
00:01:54,570 --> 00:01:59,510
そして今はそのままにしておきます。少し後で追加して戻ってきます。

31
00:01:59,670 --> 00:02:02,580
これを開いて、私たちが持っているものを見てみましょう。

32
00:02:03,300 --> 00:02:03,720
OK。

33
00:02:03,750 --> 00:02:08,670
ここではスタイリングするサイトを紹介します。最初に行うことは、実際に何かにフォントを割り当てるだけです。

34
00:02:09,030 --> 00:02:11,840
 

35
00:02:12,180 --> 00:02:17,790
そしてそれを行う前に、私たちがブラウザで利用可能なフォントについても話す必要があります。

36
00:02:18,510 --> 00:02:23,370
だから、ブラウザでコンピュータが利用可能なフォントは簡単にはわかりません。

37
00:02:23,550 --> 00:02:26,420
それは、それらがすべてのマシンで異なっているからです。

38
00:02:26,670 --> 00:02:28,360
私はここにこのサイトを開いています。

39
00:02:28,640 --> 00:02:30,070
彼女はフォントがスタックしていると言います。

40
00:02:30,270 --> 00:02:34,250
それはあなたがMacかWindowsかどうかに応じて実際に表示されます。

41
00:02:34,350 --> 00:02:38,280
与えられたフォントを持つマシンのパーセンテージはどれくらいですか？

42
00:02:38,670 --> 00:02:42,820
そして、これらは標準のウェブフォントのようなもので、多くの時間を見ることができます。

43
00:02:42,840 --> 00:02:51,030
だから、Helveticaのようなものを見ると、すべてのMacにアメリカがあるが、インストールされているウィンドウはほとんどないことがわかる。

44
00:02:51,450 --> 00:02:52,130
 

45
00:02:52,290 --> 00:02:55,430
これらはシステム上にあるシステムフォントです。

46
00:02:55,950 --> 00:03:00,650
だからあなたが使うことができる唯一のフォントではありませんが、これらはもっと安全な賭けです。

47
00:03:00,660 --> 00:03:05,790
だから、マシンごとに確実に動作することが分かっていれば、Arial blackやairialのように選ぶだろう。

48
00:03:06,270 --> 00:03:07,590
 

49
00:03:08,160 --> 00:03:10,310
明らかにこれらのフォントはかなり制限されています。

50
00:03:10,350 --> 00:03:14,030
そこで、このビデオの後半で実際にカスタムフォントをどのように組み込むかを見ていきます。

51
00:03:14,130 --> 00:03:16,230
しかし今のところ、これらのうちの1つを選んでみましょう。

52
00:03:16,260 --> 00:03:19,750
それでは、アリエル・シャロン・アリエルと一緒に行きましょう。

53
00:03:20,010 --> 00:03:24,720
それを使用するには、ここでそれを段落に割り当てます。

54
00:03:25,370 --> 00:03:27,700
だから私はここにリンクしている私のC Sに入るつもりです。

55
00:03:27,720 --> 00:03:31,840
スタイルはC S Sであり、プロパティはフォントファミリと呼ばれます。

56
00:03:32,040 --> 00:03:40,820
だから私は段落を選ぶつもりだし、フォントファミリはArialだと言うつもりだ。

57
00:03:41,060 --> 00:03:46,390
私がリフレッシュすると、ここにArialフォントがあることがわかります。

58
00:03:46,410 --> 00:03:51,830
私はまた、これを完全に有効に引用符を置くことができる簡単なメモ。

59
00:03:51,840 --> 00:03:57,200
時には、最初に数字のあるフォントを持っている場合は、これを行う必要があります。

60
00:03:57,200 --> 00:04:02,160
これは本当のフォントではありませんが、これが有効なCSSA行ではないため、引用符を付ける必要があります。

61
00:04:02,160 --> 00:04:04,360
 

62
00:04:04,830 --> 00:04:10,660
OK、私はそれにAerielを与えることができ、あなたはAerielを得ることができます。

63
00:04:10,830 --> 00:04:12,970
だからあなたが周りに遊ぶことができる他のフォントがあります。

64
00:04:12,990 --> 00:04:16,340
ジョージアを試してみましょう。

65
00:04:16,800 --> 00:04:19,290
 

66
00:04:24,150 --> 00:04:28,520
ですから、私たちのH-1ジョージアにリフレッシュしてみましょう。

67
00:04:28,860 --> 00:04:33,100
そして、あなたはそれがフォントを変えるのを見ることができるので、デザイナーなら絶望しないでください。

68
00:04:33,120 --> 00:04:36,810
より多くのフォントを使用する方法とカスタムフォントを含める方法を見ていきます。

69
00:04:37,110 --> 00:04:42,390
しかし今のところ、少しだけ制限されている組み込みのシステムのデフォルトフォントに焦点を絞るつもりです。

70
00:04:42,600 --> 00:04:48,780
 

71
00:04:51,570 --> 00:04:57,370
 

72
00:04:57,490 --> 00:05:00,990
それでも、マシンの100％が持っていることは分かりませんので、私が話したい次のプロパティはフォントサイズです。フォントサイズは、フォントの大きさや大きさを制御するようなものですフォントは指定された要素のものです。

73
00:05:01,240 --> 00:05:07,230
だから私たちは何かを選んでH-1にやってみましょう。それぞれをもっと大きくしましょう。

74
00:05:07,590 --> 00:05:12,460
だから私たちはフォントのサイズをして、私たちが使うことができる別のユニットがあります。

75
00:05:12,450 --> 00:05:18,170
最初のものはピクセルまたはピークと呼ばれています。これまでForderで少し見たことがあります。

76
00:05:18,330 --> 00:05:25,770
だから、私たちは200枚の写真のような大きなものを与えようとしています。ブラウザに戻れば、この巨大な楽しみを200ピクセルだけ得ることができます。

77
00:05:25,770 --> 00:05:31,740
 

78
00:05:31,750 --> 00:05:35,640
フォントサイズで遊びたいのであれば、どれくらいの大きさにしたいのか分かりません。

79
00:05:35,680 --> 00:05:36,610
 

80
00:05:40,410 --> 00:05:46,470
私たちはそれを検査してからここに行くことができ、これをクリックすることができます。この番号を変更して、100または60または85に変更するか、または私たちが望むものを変更できます。その変化は直ちに反映された。

81
00:05:46,470 --> 00:05:55,190
 

82
00:05:55,200 --> 00:05:57,010
 

83
00:05:57,270 --> 00:06:01,570
あなたがフォントサイズで遊んでいるとき、それは本当に素晴らしい機能です。

84
00:06:01,560 --> 00:06:06,310
だから私が言及したように、これはフォントサイズを選ぶ唯一の方法ではありません。

85
00:06:06,450 --> 00:06:07,650
唯一のユニットではありません。

86
00:06:07,900 --> 00:06:15,730
IEMと呼ばれる別の一般的なユニットがあり、E-Mは基本的に相対的なフォントサイズです。

87
00:06:15,840 --> 00:06:23,250
だから私は先に進んでフォントサイズMを開きます。

88
00:06:23,250 --> 00:06:29,790
Dとページを開いてEMセクションに移動し、ここからEM値のサイズが動的でEMが問題の要素の親に適用されるフォントのサイズと等しい。

89
00:06:29,790 --> 00:06:33,500
 

90
00:06:33,880 --> 00:06:36,900
それが本当に意味するのは、私はあなたに素早い例を示すつもりです。

91
00:06:37,320 --> 00:06:47,580
私がストリップステーキの下にここに入るようにしたら、私はスパンが持つ全てのスパン要素を入れます。

92
00:06:47,580 --> 00:06:48,120
 

93
00:06:48,120 --> 00:06:50,300
これはおそらく私たちが最初に見ているものです。

94
00:06:50,380 --> 00:06:57,510
それは実際に視覚的に違いを生ずることなくテキストをまとめてグループ化する単なる方法なのですか。それは単語ストリップステーキの周りに要素を作る方法です。

95
00:06:57,510 --> 00:07:01,050
 

96
00:07:01,050 --> 00:07:03,470
しかし、私はリフレッシュする場合。

97
00:07:03,510 --> 00:07:04,710
何も変わりません。

98
00:07:04,750 --> 00:07:09,230
まあ、フォントサイズの検索は何も変わらず、ここで私はこのスパンを持っています。

99
00:07:09,780 --> 00:07:13,540
だから、いくつかの行を強調表示したり、取り消したりして、それに何かをする方法です。

100
00:07:13,550 --> 00:07:15,620
そして、それをもっと大きくするつもりです。

101
00:07:16,020 --> 00:07:22,890
したがって、E-Mを使用するか、E-M単位を使用します。この段落のフォントの2倍にしたいと思っているのですか？

102
00:07:22,890 --> 00:07:26,380
 

103
00:07:26,520 --> 00:07:38,290
それでは、フォントサイズ2と言います。 0

104
00:07:38,460 --> 00:07:41,940
E-Mなので、これはこの段落である親要素の囲む要素のフォントサイズの2倍になるでしょう。

105
00:07:41,940 --> 00:07:49,220
だから、もし私がこのスパンをリフレッシュすると、このフォントサイズの倍のフォントが表示されます。

106
00:07:49,240 --> 00:07:53,170
しかし、実際にピクセル数を明示的に指定していませんでした。

107
00:07:53,160 --> 00:07:56,430
これがどれだけ大きかったのか分かり、それを倍増させました。

108
00:07:56,440 --> 00:08:02,430
これは動的なので、それが好きな人の多くは何らかの理由で私がフォントサイズを変更する必要があれば、自動的にこれが変わるということです。

109
00:08:02,440 --> 00:08:05,930
 

110
00:08:06,190 --> 00:08:08,320
だから、別の例を見せてあげましょう。

111
00:08:08,460 --> 00:08:12,600
 

112
00:08:16,800 --> 00:08:27,140
段落のフォントサイズのフォントサイズを大きくして40ピクセルにしてみましょう。これはまだ2倍のままであることがわかります。

113
00:08:27,150 --> 00:08:32,410
ですから、E-Mについての1つの質問は、vの初期値は何ですか、そして、何がトップレベルなのかです。

114
00:08:32,400 --> 00:08:33,500
 

115
00:08:33,580 --> 00:08:38,840
親とその親から継承し続けることはできないので、真実の源がなければなりません。

116
00:08:38,860 --> 00:08:45,120
非常に最上位レベルの要素のように、実際にはフォントサイズがあり、実際にはブラウザに応じて少し変わってしまいます。

117
00:08:45,660 --> 00:08:48,580
 

118
00:08:49,050 --> 00:08:55,480
しかし、SDNによれば、それは通常約16ピクセルなので、保証はありませんが、通常は約16ピクセルです。

119
00:08:55,480 --> 00:08:56,060
 

120
00:08:56,160 --> 00:09:01,680
だから、ほとんどの人がやることは、当初、身体のフォントサイズを設定することです。

121
00:09:01,950 --> 00:09:07,960
だからこのボディのフォントサイズのようなもの。

122
00:09:08,220 --> 00:09:16,860
それでは、10ピクセルのように始めるには本当に小さいものを作ってから、それを体より5倍大きくなるように変更しなければなりません。

123
00:09:16,890 --> 00:09:23,560
 

124
00:09:23,620 --> 00:09:30,330
それは5つのポルノE-Mのように見えるでしょうし、私たちはパラグラフを体の2倍の大きさにします。

125
00:09:30,340 --> 00:09:31,090
 

126
00:09:31,120 --> 00:09:33,000
だから2。 0 E-M。

127
00:09:33,180 --> 00:09:37,230
最後に、私たちのスパンが段落の2倍になるようにします。

128
00:09:37,360 --> 00:09:40,810
それも2です。 0は内部にネストされているので覚えています。

129
00:09:41,080 --> 00:09:46,710
それで、段落の外にあるテキストをそのようにしてみましょう。あなたはそれがかなり小さいことがわかります。

130
00:09:47,010 --> 00:09:50,080
そして、これよりも5倍も大きくしました。

131
00:09:50,160 --> 00:09:51,820
私たちはこれを2倍にしました。

132
00:09:52,000 --> 00:09:54,300
これは段落の2倍です