"글꼴 스택"이란 무엇입니까?

이미지는 웹 사이트에 올 때 많은 사랑을 얻지 만 검색 엔진에 호소하고 대부분의 사이트 콘텐츠를 전달하는 서면 단어입니다. 따라서 인쇄 디자인은 웹 사이트 디자인에서 매우 중요한 부분입니다. 사이트 텍스트의 중요성에 따라 사이트의 텍스트가 잘 보이고 읽기 쉽도록해야합니다. 이것은 CSS (Cascading Style Sheets) 스타일로 이루어집니다.

최신 웹 디자인 표준에 따라 웹 사이트 텍스트 콘텐츠의 모양을 지정하려면 CSS를 사용하십시오. 이렇게하면 해당 CSS 스타일이 페이지의 HTML 구조와 분리됩니다. 예를 들어, 페이지의 글꼴을 "Arial"로 설정하려면 다음 스타일 규칙을 CSS에 추가하면됩니다 (참고 - 스타일을 강화하는 외부 CSS 스타일 시트에서 수행 될 수 있음). 웹 사이트의 모든 페이지에 대해)

body {font-family : Arial; }

이 글꼴은 "본문"으로 설정되므로 CSS 캐스케이드는 페이지의 다른 모든 요소에 스타일을 적용합니다. 이것은 다른 모든 HTML 요소가 "body"요소의 하위 요소이기 때문에 글꼴 패밀리 또는 색상과 같은 CSS 스타일이 부모 요소에서 자식 요소로 캐스케이드됩니다. 특정 요소에 대해보다 구체적인 스타일을 추가하지 않는 경우에도 마찬가지입니다. 이 CSS의 유일한 문제점은 하나의 글꼴 만 지정된다는 것입니다. 어떤 이유로 든 해당 글꼴을 찾을 수 없으면 브라우저는 대신 다른 글꼴을 사용합니다. 어떤 글꼴이 사용되는지에 대한 제어권이 없기 때문에 이것은 나쁘다. 브라우저가 당신을 위해 선택할 것이고, 당신이 사용하기로 결정한 것을 마음에 들지 않을 것이다! 그것이 글꼴 스택이 들어오는 곳입니다.

글꼴 스택은 CSS font-family 선언에있는 글꼴 목록입니다. 글꼴은 글꼴이로드되지 않는 등의 문제가 발생할 경우 사이트에 표시하려는 환경 설정 순서대로 나열됩니다. 글꼴 스택을 사용하면 컴퓨터에서 사용자가 호출 한 초기 글꼴이 없더라도 디자이너가 웹 페이지의 글꼴 모양을 제어 할 수 있습니다.

그렇다면 글꼴 스택은 어떻게 보이나요? 다음은 그 예입니다.

body {font-family : 조지아, "Times New Roman", serif; }

여기서 주목해야 할 몇 가지 사항이 있습니다.

먼저, 서로 다른 글꼴 이름을 쉼표로 구분했다는 것을 알 수 있습니다. 각 글꼴 사이에 쉼표로 구분되어 있으면 원하는만큼 글꼴을 추가 할 수 있습니다. 브라우저는 먼저 지정된 첫 번째 글꼴을로드하려고 시도합니다. 그것이 실패하면, 사용할 수있는 글꼴을 찾을 때까지 각 글꼴을 시도하는 행을 실행합니다. 이 예에서는 웹 안전 글꼴을 사용하고 있으며 "Georgia"는 사이트를 방문하는 사람의 컴퓨터에서 발견 될 것입니다 (참고 - 브라우저는 컴퓨터에서 페이지에 지정된 글꼴을 검색하므로 사이트에서 실제로 시스템에서로드 할 글꼴). 어떤 이유로 글꼴을 찾지 못하면 스택 아래로 이동하여 지정된 다음 글꼴을 시도합니다.

그 다음 글꼴의 관점에서 스택에 어떻게 쓰여지는지 주목하십시오. "Times New Roman"의 이름은 큰 따옴표로 묶습니다. 이것은 글꼴 이름에 여러 단어가 있기 때문입니다. 두 개 이상의 단어가 포함 된 글꼴 이름 (Trebuchet MS, Courier New 등)은 큰 따옴표로 이름을 지정해야합니다. 그러면 브라우저에서 모든 단어가 하나의 글꼴 이름에 속한다는 것을 알 수 있습니다.

마지막으로 글꼴 스택을 일반 글꼴 분류 인 "serif"로 끝냅니다. 드물게 스택에 이름을 지정한 글꼴이 하나도 없으면 브라우저는 선택한 글꼴로 적어도 분류되는 글꼴을 찾습니다. 예를 들어, Arial 및 Verdana와 같은 sans-serif 글꼴을 사용하는 경우 "sans-serif"분류로 글꼴 스택을 끝내는 것이로드 문제가있는 경우 글꼴을 해당 가족 전체에 유지하는 것입니다. 틀림없이, 브라우저가 스택에 나열된 글꼴을 찾을 수없고 대신이 일반 분류를 사용해야하는 경우는 매우 드물지만 어쨌든 이중 안전성을 포함하는 것이 가장 좋습니다.

글꼴 스택 및 웹 글꼴

오늘날 대부분의 웹 사이트는 사이트의 이미지, 자바 스크립트 파일 등과 같은 다른 리소스와 함께 사이트에 포함되거나 Google 글꼴 또는 Typekit과 같은 외부 글꼴 위치에 연결된 웹 글꼴을 사용합니다. 이러한 글꼴은 파일 자체에 연결되어 있기 때문에로드해야하지만 글꼴 스택을 사용하여 발생할 수있는 문제를 일부 제어 할 수 있습니다. Arial, Verdana, Georgia 및 Times New Roman을 포함하여이 기사에서 예제로 사용한 글꼴은 모두 웹에서 사용할 수있는 안전한 글꼴이라는 점에 유의하십시오. 사람의 컴퓨터에서). 누락 된 글꼴의 가능성은 매우 낮지 만 글꼴 스택을 지정 하면 사이트의 인쇄 디자인 을 가능한 많이 방탄 하는 데 도움이됩니다.

Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 됨 : 8/9/17