따라서이 비디오는 성공한 글꼴에 중점을두고 분명히 재미 있고 웹 페이지 용 글꼴을 고르는 것은 정말로 중요합니다.
그러나 글꼴과 텍스트와 관련된 많은 다른 속성도 다루겠습니다.
그리고 그것들은 폰트 패밀리 폰트 크기 글꼴 체중 라인 높이 텍스트 라인과 텍스트 장식입니다.
그래서이 비디오에서 우리는 모든 것을 막을 것입니다.
그리고 우리가 할 첫 번째 일은 우리가 스타일을 지정할 간단한 텍스트를 얻는 것입니다.
그래서 저는 Jim M 파일이라는 단순한 펑크를 가지고 있습니다. 저는 앞으로 나아가서 입에 넣을 것입니다.
그래서 저는 헤더와 스타일을 볼 수 있도록 H-1을 할 것입니다.
그리고 몇 단락.
따라서이 폰트의 데모 페이지를 호출 한 다음 임의의 단어를 입력하는 것보다는 실제로 페이지에 영어가 어떻게 보이는지 실제로 반영하지 않는 다음과 같은 방법을 사용합니다.
Lorem Epsom 생성기를 사용할 것입니다.
따라서 Lorem Ipsum 생성기가 영어 단어 인 무작위 텍스트를 생성하는 데 사용되는 것을 모르는 사람들에게는
전혀 의미가 없지만 최소한 실제 단어처럼 보입니다.
그래서 자리 표시 자 텍스트입니다.
그래서 나는 웹 디자이너를위한 가장 재미있는 Lorem Ipsum 발전기 중 10 가지를 열어 놓은 우스운 기사 열 종류가 있습니다.
그리고 저는이 첫 번째 베이컨 ipsum으로 가려고합니다. 그래서 여기서 몇 단락을 생성 할 것입니다.
빨리.
나에게 베이컨을 줘. 그러면 너는 내가 약간의 본문을주는 것을 볼 수있다.
그러나 이것은 실제 텍스트로, 실제로 웹 사이트에서 볼 수있는 잠재력처럼 보입니다.
이런 식으로 삐걱 거리는 것처럼 보이지는 않습니다.
따라서 글꼴을 더 잘 표현할 수 있습니다.
그래서 저는 앞으로 가서 붙여 넣을 것입니다.
나는 이것을 두 단락으로 만들 예정입니다.
괜찮아.
그리고 우리는 그것을 지금 당장 남겨두고 우리는 돌아와 조금 후에 추가 할 것입니다.
이걸 열어서 우리가 가진 것을 보자.
승인.
그래서 여기에 우리가 스타일을 지정하게 될 사이트가 있습니다. 우리가하고 싶은 첫 번째 일은 실제로 어떤 것에 폰트를 어떻게 할당 할 것인가에 대한 이야기입니다.
그리고 심지어 우리가 그것을 할 수 있기 전에 우리는 브라우저에서 우리에게 어떤 글꼴을 사용할 지에 대해서도 이야기해야합니다.
따라서 컴퓨터가 브라우저에서 사용할 수있는 글꼴에 대한 쉬운 대답은 없습니다.
그것들은 모든 기계에서 다르기 때문입니다.
여기에이 사이트가 열려 있습니다.
그녀는 글꼴이 쌓여 있다고 말한다.
Mac 또는 Windows를 사용하는지 여부에 따라 실제로 표시됩니다.
주어진 글꼴을 가진 기계의 비율은 얼마입니까?
그리고 이것들은 우리가 많은 시간을 보게 될 단순한 종류의 표준 웹 글꼴입니다.
따라서 Helvetica와 같은 것을 보면 모든 Mac에 미국이 있지만 Windows가 거의 설치되지 않은 것을 볼 수 있습니다.
그래서 이들은 시스템에있는 시스템 글꼴입니다.
그래서 이것들은 당신이 사용할 수있는 유일한 글꼴은 아니지만 이것들은 더 안전한 베팅입니다.
따라서 모든 기계에서 확실하게 작동 할 것이라는 것을 알고 싶다면 Arial black이나 공중으로 선택할 수 있습니다.
물론이 글꼴들은 꽤 제한되어 있습니다.
따라서이 비디오의 뒷부분에 사용자 정의 글꼴을 실제로 포함시키는 방법을 살펴 보겠습니다.
하지만 지금은 이들 중 하나를 선택하겠습니다.
그래서 Ariel Sharon Ariel과 함께 가자.
그래서 그것을 사용하기 위해 여기에 우리 단락에 할당 할 것입니다.
그래서 우리는 여기에 링크 된 C S S로 들어갈 것입니다.
스타일은 C S S이고 속성은 폰트 패밀리라고합니다.
따라서 단락을 선택하겠습니다. 글꼴 패밀리는 Arial이라고 할 것입니다.
그리고 새로 고침하면 여기에 굴림 글꼴이 있습니다.
하나의 간단한 참고 사항이 또한 전적으로 유효한이 주위에 따옴표를 넣을 수 있습니다.
때로는 번호가있는 글꼴을 처음 사용하는 경우이 작업을 수행해야합니다.
이것이 실제 글꼴은 아니지만 이것이 유효한 CSSA 라인이 아니기 때문에이 글꼴 주위에 따옴표를 써야합니다.
좋아, 나는 그것을 Aeriel에게 줄 수 있고, 우리는 Aeriel을 볼 수있다.
그래서 주위에 놀 수있는 다른 글꼴이 있습니다.
조지아를 시험합시다.
그래서 H-1 그루지야에 새로 고침을하십시오.
디자이너가 글꼴을 바꾸면 절망하지 않을 것입니다.
더 많은 글꼴을 사용하는 방법과 맞춤 글꼴을 포함시키는 방법을 살펴 보겠습니다.
그러나 지금은 약간만 제한된 내장 시스템 기본 글꼴에 초점을 맞출 것입니다.
그리고 기계의 100 %가 가지고있는 것이 전혀 없다는 것을 알 수 있기 때문에 아무런 보장이 없기 때문에 제가 이야기하고 싶은 다음 속성은 폰트 크기입니다. 그래서 폰트 크기는 폰트가 얼마나 큰지 또는 얼마나 작습니까? 글꼴은 주어진 요소의 것입니다.
그래서 우리는 무언가를 선택할 수 있고 우리의 H-1에 그것을하게하고 각각을 훨씬 더 크게 만들자.
그래서 우리는 글꼴 크기를 사용하고 우리가 사용할 수있는 다른 단위가 있습니다.
그리고 첫 번째 것은 픽셀 또는 피크라고하며 Forder와는 조금 전에 보았습니다.
따라서 우리는 200 개의 사진과 같은 거대한 사진을 제공 할 것입니다. 브라우저로 돌아 가면이 거대한 재미를 200 픽셀만으로도 얻을 수 있는지 알 수 있습니다.
글꼴 크기로 놀고 싶다면 얼마나 큰지 잘 모를 것입니다.
우리는 그것을 검사 할 수 있고 우리는 여기를 클릭 할 수 있고 이것을 클릭 할 수 있고이 번호를 바꿀 수있어서 100이나 60이나 85로 바꾸거나 우리가 원한다면 무엇이든 바꿀 수 있습니다. 우리는 브라우저에서 놀고 그냥 볼 수 있습니다. 그 변화는 즉시 반영되었다.
글꼴 크기로 놀고있을 때 정말 멋진 기능입니다.
그래서 이것이 글꼴 크기를 선택하는 유일한 방법은 아니지만 언급했듯이.
그것은 유일한 단위가 아닙니다.
IEM이라고하는 또 다른 인기있는 유닛이 있고 E-M은 기본적으로 상대 글꼴 크기입니다.
그래서 저는 글꼴 크기 MD와 페이지를 열고 EM 섹션으로 가서 EM 값의 크기가 동적이며 여기에서 EM을 읽으려고합니다. 문제의 요소의 부모에게 적용되는 폰트의 크기.
그래서 그것이 진정으로 의미하는 것은 제가 여러분에게 간단한 예를 보여줄 것입니다.
내가 스트립 스테이크 아래에 여기에 들어가자면 스팬이하는 모든 것에 스팬 요소를 넣을 것입니다.
이것은 아마 우리가 처음 보는 것일 것입니다.
실제로 시각적으로 차이를 만들지 않고 텍스트를 그룹화하는 방법 일 뿐이므로 스트립 스테이크라는 단어 주위에 요소를 만드는 방법 일뿐입니다.
하지만 새로 고침하면.
전혀 변화가 없습니다.
글쎄 글꼴 크기에 대한 검색하지만 아무것도 여기에 그리고 내가이 범위를 가지고 변경되지 않습니다.
그래서 그것은 어떤 라인을 강조 표시하거나 뽑아 내고 그 다음에 뭔가를하는 방법입니다.
그리고 우리는 그것을 훨씬 더 크게 만들 것입니다.
그래서 우리는 E-M을 사용하거나 E-M 단위를 사용합니다. 우리가 여기에 들어가는이 단락의 글꼴 크기의 두배로 만들고 싶다면 우리는 이것을 사용합니다.
그러니 우리는 단지 글꼴 크기 2.0 E-M을 말합니다. 그래서이 단락 인 부모 요소의 둘러싸는 요소의 글꼴 크기의 두배가 될 것입니다.
그래서 당신이 여기서 볼 수있는 것은이 범위를 새로 고치면이 글꼴 크기의 두 배입니다.
그러나 실제로 얼마나 많은 픽셀을 만들지는 명시 적으로 밝히지 않았습니다.
그것은 단지 이것이 얼마나 큰지를 알았고 두 배로 증가 시켰습니다.
그래서 이것이 역동적입니다. 그래서 많은 사람들이 이런 이유로 어떤 이유로 폰트 크기를 변경해야한다면 자동으로 바뀔 것입니다.
그래서 다른 예를 보여 드리겠습니다.
단락의 글꼴 크기의 글꼴 크기를 늘리고 40 픽셀을 만들어 보겠습니다.이 글꼴 크기가 여전히 두 배로 유지되는 것을 볼 수 있습니다.
그렇다면 E-M에 관한 한 가지 질문은 v의 초기 값은 무엇이고 최상위 레벨은 무엇인가하는 것입니다.
우리는 단지 부모와 그 부모로부터 상속받을 수 없기 때문에 진리의 근원이되어야합니다.
실제로 폰트 크기를 가지고 있고 브라우저에 따라 조금씩 실망한 최상위 레벨 요소와 같아야합니다.
그러나 SDN에 따르면 보통 약 16 픽셀이므로 보장 할 수는 없지만 일반적으로 약 16 픽셀입니다.
대부분의 사람들이 할 일은 처음부터 몸에 글꼴 크기를 설정하는 것입니다.
그래서이 본문 글꼴 크기와 같은 것입니다.
그리고 10 픽셀과 같이 시작하기에 아주 작은 것을 한 번 해보고 몸을 5 배나 크게 바꾸거나 변경해야합니다.
그래서 그것은 5 명의 포르노 E-M처럼 보이게 될 것입니다. 그리고 우리는 우리의 단락을 몸으로 두 배나 늘리게됩니다.
그래서 2.0 E-M.
그리고 마지막으로 우리는 스팬이 문단의 두 배가되기를 원합니다.
내부에 중첩되어 있기 때문에 2.0이기도합니다.
그래서 단락 밖에서 몇 가지 텍스트를 작성하면 꽤 작아 보입니다.
그리고 나서 우리는 이것을 이보다 5 배 더 크게 만들었습니다.
우리는 이것을 두 배로 만들었습니다.