글꼴 - 패밀리 특성의 구문
활자체 디자인 은 성공적인 웹 사이트 디자인에있어 매우 중요한 요소입니다. 읽기 쉬운 텍스트 와 멋진 사이트를 만드는 것은 모든 웹 디자인 전문가의 목표입니다. 이를 위해서는 웹 페이지에서 사용하려는 특정 글꼴을 설정할 수 있어야합니다. 웹 도큐멘트의 서체 또는 글꼴 모음을 지정하려면 CSS에서 font-family 스타일 속성을 사용합니다.
사용할 수있는 가장 간단한 글꼴 패밀리 스타일은 단 하나의 글꼴 패밀리를 포함합니다.
p {글꼴 패밀리 : Arial; }이 스타일을 페이지에 적용하면 모든 단락이 "Arial"글꼴 군으로 표시됩니다. 이것은 "Arial"이 "웹 안전 글꼴"이라고 알려진 이래로 대부분의 컴퓨터에 설치되어 있다면 대부분의 경우 해당 페이지가 의도 한 글꼴로 표시된다는 것을 쉽게 알 수 있습니다. .
선택한 글꼴을 찾을 수없는 경우 어떻게됩니까? 예를 들어, 페이지에서 "웹 안전 글꼴"을 사용하지 않으면 글꼴이 없으면 사용자 에이전트는 어떤 작업을 수행합니까? 그들은 대용 암호를 만든다.
이것은 매우 재미있는보고있는 페이지를 초래할 수 있습니다. 내 컴퓨터가 개발자가 지정한 글꼴이 없기 때문에 내 컴퓨터가 완전히 "Wingdings"(아이콘 세트)로 표시 한 페이지로 이동했는데 브라우저가 어떤 글꼴로되어 있는지에 대한 선택이 매우 어려웠습니다. 대체품으로 사용하십시오. 이 페이지는 완전히 읽을 수 없었습니다! 이것은 폰트 스택이 나오는 곳입니다.
글꼴 스택에 여러 글꼴 군을 쉼표로 구분
"글꼴 스택"은 페이지에서 사용할 글꼴 목록입니다. 당신은 귀하의 선호도에 따라 글꼴을 선택하고 각각을 쉼표로 구분하십시오. 브라우저에 목록의 첫 번째 글꼴 모음이 없으면 시스템에있는 글꼴이 발견 될 때까지 두 번째 글꼴과 세 번째 글꼴을 차례로 시도합니다.
font-family : Pussycat, Algerian, Broadway;위의 예에서 브라우저는 다른 글꼴이없는 경우 "Pussycat"글꼴을 찾은 다음 "Algerian"을 선택한 다음 "Broadway"를 찾습니다. 이렇게하면 선택한 글꼴 중 적어도 하나 이상을 사용할 수 있습니다. 완벽하지는 않습니다. 그래서 더 많은 글꼴 스택을 추가 할 수 있습니다 (읽기!).
마지막으로 일반 글꼴 사용
따라서 글꼴 목록이있는 글꼴 스택을 만들 수 있으며 브라우저에서 찾을 수있는 글꼴이 아직 없습니다. 브라우저가 잘못된 대체 선택을하면 페이지를 읽을 수 없게되는 것을 원하지 않을 것입니다. 다행스럽게도 CSS에는 일반적인 글꼴이 있습니다.
일반 글꼴로 글꼴 목록을 끝내야합니다 (한 가족 또는 웹 안전 글꼴 목록 일지라도). 당신이 사용할 수있는 다섯 가지가 있습니다 :
- 필기체
- 공상
- 모노 스페이스
- 산세 리프
- 가는 장식 선
위의 두 예제는 다음과 같이 변경 될 수 있습니다.
font-family : Arial, sans-serif; font-family : Pussycat, Algerian, Broadway, 판타지;일부 글꼴 패밀리 이름은 두 개 이상의 단어입니다.
사용하려는 글꼴 패밀리가 둘 이상의 단어 인 경우에는 큰 따옴표로 묶어야합니다. 일부 브라우저는 따옴표없이 글꼴 모음을 읽을 수 있지만 공백이 압축되거나 무시되면 문제가 발생할 수 있습니다.
font-family : "Times New Roman", serif;이 예제에서는 여러 단어 인 "Times New Roman"글꼴 이름이 따옴표로 묶여 있음을 알 수 있습니다. 이렇게하면 세 단어가 모두 한 단어로 된 것이 아니라 세 단어가 모두 해당 글꼴 이름의 일부라는 것을 브라우저에 알립니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 (Jeremy Girard)에 의해 12/2/16에 편집 됨