1
00:00:01,020 --> 00:00:09,880
따라서이 비디오는 성공한 글꼴에 중점을두고 분명히 재미 있고 웹 페이지 용 글꼴을 고르는 것은 정말로 중요합니다.

2
00:00:10,110 --> 00:00:14,660
그러나 글꼴과 텍스트와 관련된 많은 다른 속성도 다루겠습니다.

3
00:00:14,730 --> 00:00:23,470
그리고 그것들은 폰트 패밀리 폰트 크기 글꼴 체중 라인 높이 텍스트 라인과 텍스트 장식입니다.

4
00:00:23,610 --> 00:00:26,530
그래서이 비디오에서 우리는 모든 것을 막을 것입니다.

5
00:00:26,730 --> 00:00:32,670
그리고 우리가 할 첫 번째 일은 우리가 스타일을 지정할 간단한 텍스트를 얻는 것입니다.

6
00:00:33,030 --> 00:00:39,080
그래서 저는 Jim M 파일이라는 단순한 펑크를 가지고 있습니다. 저는 앞으로 나아가서 입에 넣을 것입니다.

7
00:00:39,080 --> 00:00:42,660
그래서 저는 헤더와 스타일을 볼 수 있도록 H-1을 할 것입니다.

8
00:00:42,750 --> 00:00:44,180
그리고 몇 단락.

9
00:00:44,490 --> 00:00:59,580
따라서이 폰트의 데모 페이지를 호출 한 다음 임의의 단어를 입력하는 것보다는 실제로 페이지에 영어가 어떻게 보이는지 실제로 반영하지 않는 다음과 같은 방법을 사용합니다.

10
00:00:59,620 --> 00:01:02,610
Lorem Epsom 생성기를 사용할 것입니다.

11
00:01:02,610 --> 00:01:09,980
따라서 Lorem Ipsum 생성기가 영어 단어 인 무작위 텍스트를 생성하는 데 사용되는 것을 모르는 사람들에게는

12
00:01:09,990 --> 00:01:13,550
전혀 의미가 없지만 최소한 실제 단어처럼 보입니다.

13
00:01:13,560 --> 00:01:15,570
그래서 자리 표시 자 텍스트입니다.

14
00:01:16,110 --> 00:01:24,350
그래서 나는 웹 디자이너를위한 가장 재미있는 Lorem Ipsum 발전기 중 10 가지를 열어 놓은 우스운 기사 열 종류가 있습니다.

15
00:01:24,570 --> 00:01:31,090
그리고 저는이 첫 번째 베이컨 ipsum으로 가려고합니다. 그래서 여기서 몇 단락을 생성 할 것입니다.

16
00:01:31,560 --> 00:01:31,910
빨리.

17
00:01:31,920 --> 00:01:34,370
나에게 베이컨을 줘. 그러면 너는 내가 약간의 본문을주는 것을 볼 수있다.

18
00:01:34,470 --> 00:01:41,670
그러나 이것은 실제 텍스트로, 실제로 웹 사이트에서 볼 수있는 잠재력처럼 보입니다.

19
00:01:41,700 --> 00:01:43,430
이런 식으로 삐걱 거리는 것처럼 보이지는 않습니다.

20
00:01:43,440 --> 00:01:45,890
따라서 글꼴을 더 잘 표현할 수 있습니다.

21
00:01:46,110 --> 00:01:48,010
그래서 저는 앞으로 가서 붙여 넣을 것입니다.

22
00:01:48,120 --> 00:01:52,100
나는 이것을 두 단락으로 만들 예정입니다.

23
00:01:54,140 --> 00:01:54,570
괜찮아.

24
00:01:54,570 --> 00:01:59,510
그리고 우리는 그것을 지금 당장 남겨두고 우리는 돌아와 조금 후에 추가 할 것입니다.

25
00:01:59,670 --> 00:02:02,580
이걸 열어서 우리가 가진 것을 보자.

26
00:02:03,300 --> 00:02:03,720
승인.

27
00:02:03,750 --> 00:02:11,840
그래서 여기에 우리가 스타일을 지정하게 될 사이트가 있습니다. 우리가하고 싶은 첫 번째 일은 실제로 어떤 것에 폰트를 어떻게 할당 할 것인가에 대한 이야기입니다.

28
00:02:12,180 --> 00:02:18,510
그리고 심지어 우리가 그것을 할 수 있기 전에 우리는 브라우저에서 우리에게 어떤 글꼴을 사용할 지에 대해서도 이야기해야합니다.

29
00:02:18,510 --> 00:02:23,370
따라서 컴퓨터가 브라우저에서 사용할 수있는 글꼴에 대한 쉬운 대답은 없습니다.

30
00:02:23,550 --> 00:02:26,420
그것들은 모든 기계에서 다르기 때문입니다.

31
00:02:26,670 --> 00:02:28,360
여기에이 사이트가 열려 있습니다.

32
00:02:28,640 --> 00:02:30,070
그녀는 글꼴이 쌓여 있다고 말한다.

33
00:02:30,270 --> 00:02:34,250
Mac 또는 Windows를 사용하는지 여부에 따라 실제로 표시됩니다.

34
00:02:34,350 --> 00:02:38,280
주어진 글꼴을 가진 기계의 비율은 얼마입니까?

35
00:02:38,670 --> 00:02:42,820
그리고 이것들은 우리가 많은 시간을 보게 될 단순한 종류의 표준 웹 글꼴입니다.

36
00:02:42,840 --> 00:02:52,130
따라서 Helvetica와 같은 것을 보면 모든 Mac에 미국이 있지만 Windows가 거의 설치되지 않은 것을 볼 수 있습니다.

37
00:02:52,290 --> 00:02:55,430
그래서 이들은 시스템에있는 시스템 글꼴입니다.

38
00:02:55,950 --> 00:03:00,650
그래서 이것들은 당신이 사용할 수있는 유일한 글꼴은 아니지만 이것들은 더 안전한 베팅입니다.

39
00:03:00,660 --> 00:03:07,590
따라서 모든 기계에서 확실하게 작동 할 것이라는 것을 알고 싶다면 Arial black이나 공중으로 선택할 수 있습니다.

40
00:03:08,160 --> 00:03:10,310
물론이 글꼴들은 꽤 제한되어 있습니다.

41
00:03:10,350 --> 00:03:14,030
따라서이 비디오의 뒷부분에 사용자 정의 글꼴을 실제로 포함시키는 방법을 살펴 보겠습니다.

42
00:03:14,130 --> 00:03:16,230
하지만 지금은 이들 중 하나를 선택하겠습니다.

43
00:03:16,260 --> 00:03:19,750
그래서 Ariel Sharon Ariel과 함께 가자.

44
00:03:20,010 --> 00:03:24,720
그래서 그것을 사용하기 위해 여기에 우리 단락에 할당 할 것입니다.

45
00:03:25,370 --> 00:03:27,700
그래서 우리는 여기에 링크 된 C S S로 들어갈 것입니다.

46
00:03:27,720 --> 00:03:31,840
스타일은 C S S이고 속성은 폰트 패밀리라고합니다.

47
00:03:32,040 --> 00:03:40,820
따라서 단락을 선택하겠습니다. 글꼴 패밀리는 Arial이라고 할 것입니다.

48
00:03:41,060 --> 00:03:46,390
그리고 새로 고침하면 여기에 굴림 글꼴이 있습니다.

49
00:03:46,410 --> 00:03:51,830
하나의 간단한 참고 사항이 또한 전적으로 유효한이 주위에 따옴표를 넣을 수 있습니다.

50
00:03:51,840 --> 00:03:57,200
때로는 번호가있는 글꼴을 처음 사용하는 경우이 작업을 수행해야합니다.

51
00:03:57,200 --> 00:04:04,360
이것이 실제 글꼴은 아니지만 이것이 유효한 CSSA 라인이 아니기 때문에이 글꼴 주위에 따옴표를 써야합니다.

52
00:04:04,830 --> 00:04:10,660
좋아, 나는 그것을 Aeriel에게 줄 수 있고, 우리는 Aeriel을 볼 수있다.

53
00:04:10,830 --> 00:04:12,970
그래서 주위에 놀 수있는 다른 글꼴이 있습니다.

54
00:04:12,990 --> 00:04:16,340
조지아를 시험합시다.

55
00:04:16,800 --> 00:04:28,520
그래서 H-1 그루지야에 새로 고침을하십시오.

56
00:04:28,860 --> 00:04:33,100
디자이너가 글꼴을 바꾸면 절망하지 않을 것입니다.

57
00:04:33,120 --> 00:04:36,810
더 많은 글꼴을 사용하는 방법과 맞춤 글꼴을 포함시키는 방법을 살펴 보겠습니다.

58
00:04:37,110 --> 00:04:42,500
그러나 지금은 약간만 제한된 내장 시스템 기본 글꼴에 초점을 맞출 것입니다.

59
00:04:42,600 --> 00:05:00,990
그리고 기계의 100 %가 가지고있는 것이 전혀 없다는 것을 알 수 있기 때문에 아무런 보장이 없기 때문에 제가 이야기하고 싶은 다음 속성은 폰트 크기입니다. 그래서 폰트 크기는 폰트가 얼마나 큰지 또는 얼마나 작습니까? 글꼴은 주어진 요소의 것입니다.

60
00:05:01,240 --> 00:05:07,230
그래서 우리는 무언가를 선택할 수 있고 우리의 H-1에 그것을하게하고 각각을 훨씬 더 크게 만들자.

61
00:05:07,590 --> 00:05:12,460
그래서 우리는 글꼴 크기를 사용하고 우리가 사용할 수있는 다른 단위가 있습니다.

62
00:05:12,450 --> 00:05:18,170
그리고 첫 번째 것은 픽셀 또는 피크라고하며 Forder와는 조금 전에 보았습니다.

63
00:05:18,330 --> 00:05:31,740
따라서 우리는 200 개의 사진과 같은 거대한 사진을 제공 할 것입니다. 브라우저로 돌아 가면이 거대한 재미를 200 픽셀만으로도 얻을 수 있는지 알 수 있습니다.

64
00:05:31,750 --> 00:05:35,640
글꼴 크기로 놀고 싶다면 얼마나 큰지 잘 모를 것입니다.

65
00:05:35,680 --> 00:05:57,010
우리는 그것을 검사 할 수 있고 우리는 여기를 클릭 할 수 있고 이것을 클릭 할 수 있고이 번호를 바꿀 수있어서 100이나 60이나 85로 바꾸거나 우리가 원한다면 무엇이든 바꿀 수 있습니다. 우리는 브라우저에서 놀고 그냥 볼 수 있습니다. 그 변화는 즉시 반영되었다.

66
00:05:57,270 --> 00:06:01,570
글꼴 크기로 놀고있을 때 정말 멋진 기능입니다.

67
00:06:01,560 --> 00:06:06,310
그래서 이것이 글꼴 크기를 선택하는 유일한 방법은 아니지만 언급했듯이.

68
00:06:06,450 --> 00:06:07,650
그것은 유일한 단위가 아닙니다.

69
00:06:07,900 --> 00:06:15,730
IEM이라고하는 또 다른 인기있는 유닛이 있고 E-M은 기본적으로 상대 글꼴 크기입니다.

70
00:06:15,840 --> 00:06:33,500
그래서 저는 글꼴 크기 MD와 페이지를 열고 EM 섹션으로 가서 EM 값의 크기가 동적이며 여기에서 EM을 읽으려고합니다. 문제의 요소의 부모에게 적용되는 폰트의 크기.

71
00:06:33,880 --> 00:06:36,900
그래서 그것이 진정으로 의미하는 것은 제가 여러분에게 간단한 예를 보여줄 것입니다.

72
00:06:37,320 --> 00:06:48,120
내가 스트립 스테이크 아래에 여기에 들어가자면 스팬이하는 모든 것에 스팬 요소를 넣을 것입니다.

73
00:06:48,120 --> 00:06:50,300
이것은 아마 우리가 처음 보는 것일 것입니다.

74
00:06:50,380 --> 00:07:01,050
실제로 시각적으로 차이를 만들지 않고 텍스트를 그룹화하는 방법 일 뿐이므로 스트립 스테이크라는 단어 주위에 요소를 만드는 방법 일뿐입니다.

75
00:07:01,050 --> 00:07:03,470
하지만 새로 고침하면.

76
00:07:03,510 --> 00:07:04,710
전혀 변화가 없습니다.

77
00:07:04,750 --> 00:07:09,230
글쎄 글꼴 크기에 대한 검색하지만 아무것도 여기에 그리고 내가이 범위를 가지고 변경되지 않습니다.

78
00:07:09,780 --> 00:07:13,540
그래서 그것은 어떤 라인을 강조 표시하거나 뽑아 내고 그 다음에 뭔가를하는 방법입니다.

79
00:07:13,550 --> 00:07:15,620
그리고 우리는 그것을 훨씬 더 크게 만들 것입니다.

80
00:07:16,020 --> 00:07:26,380
그래서 우리는 E-M을 사용하거나 E-M 단위를 사용합니다. 우리가 여기에 들어가는이 단락의 글꼴 크기의 두배로 만들고 싶다면 우리는 이것을 사용합니다.

81
00:07:26,520 --> 00:07:41,940
그러니 우리는 단지 글꼴 크기 2.0 E-M을 말합니다. 그래서이 단락 인 부모 요소의 둘러싸는 요소의 글꼴 크기의 두배가 될 것입니다.

82
00:07:41,940 --> 00:07:49,220
그래서 당신이 여기서 볼 수있는 것은이 범위를 새로 고치면이 글꼴 크기의 두 배입니다.

83
00:07:49,240 --> 00:07:53,170
그러나 실제로 얼마나 많은 픽셀을 만들지는 명시 적으로 밝히지 않았습니다.

84
00:07:53,160 --> 00:07:56,430
그것은 단지 이것이 얼마나 큰지를 알았고 두 배로 증가 시켰습니다.

85
00:07:56,440 --> 00:08:05,930
그래서 이것이 역동적입니다. 그래서 많은 사람들이 이런 이유로 어떤 이유로 폰트 크기를 변경해야한다면 자동으로 바뀔 것입니다.

86
00:08:06,190 --> 00:08:08,320
그래서 다른 예를 보여 드리겠습니다.

87
00:08:08,460 --> 00:08:27,140
단락의 글꼴 크기의 글꼴 크기를 늘리고 40 픽셀을 만들어 보겠습니다.이 글꼴 크기가 여전히 두 배로 유지되는 것을 볼 수 있습니다.

88
00:08:27,150 --> 00:08:33,500
그렇다면 E-M에 관한 한 가지 질문은 v의 초기 값은 무엇이고 최상위 레벨은 무엇인가하는 것입니다.

89
00:08:33,580 --> 00:08:38,860
우리는 단지 부모와 그 부모로부터 상속받을 수 없기 때문에 진리의 근원이되어야합니다.

90
00:08:38,860 --> 00:08:48,580
실제로 폰트 크기를 가지고 있고 브라우저에 따라 조금씩 실망한 최상위 레벨 요소와 같아야합니다.

91
00:08:49,050 --> 00:08:56,060
그러나 SDN에 따르면 보통 약 16 픽셀이므로 보장 할 수는 없지만 일반적으로 약 16 픽셀입니다.

92
00:08:56,160 --> 00:09:01,680
대부분의 사람들이 할 일은 처음부터 몸에 글꼴 크기를 설정하는 것입니다.

93
00:09:01,950 --> 00:09:07,960
그래서이 본문 글꼴 크기와 같은 것입니다.

94
00:09:08,220 --> 00:09:23,560
그리고 10 픽셀과 같이 시작하기에 아주 작은 것을 한 번 해보고 몸을 5 배나 크게 바꾸거나 변경해야합니다.

95
00:09:23,620 --> 00:09:31,090
그래서 그것은 5 명의 포르노 E-M처럼 보이게 될 것입니다. 그리고 우리는 우리의 단락을 몸으로 두 배나 늘리게됩니다.

96
00:09:31,120 --> 00:09:33,000
그래서 2.0 E-M.

97
00:09:33,180 --> 00:09:37,230
그리고 마지막으로 우리는 스팬이 문단의 두 배가되기를 원합니다.

98
00:09:37,360 --> 00:09:40,810
내부에 중첩되어 있기 때문에 2.0이기도합니다.

99
00:09:41,080 --> 00:09:46,710
그래서 단락 밖에서 몇 가지 텍스트를 작성하면 꽤 작아 보입니다.

100
00:09:47,010 --> 00:09:50,080
그리고 나서 우리는 이것을 이보다 5 배 더 크게 만들었습니다.

101
00:09:50,160 --> 00:09:51,820
우리는 이것을 두 배로 만들었습니다.