웹 디자인의 글꼴 적용

최근 많은 사람들이 웹페이지에서 글꼴을 선택하는 방법에 대한 문제를 언급했습니다. 문제는 작지만 프론트엔드 개발에서는 기본이다. 왜냐하면 현재의 웹페이지는 여전히 텍스트 정보가 지배하고 있고, 텍스트 표현의 가장 중요한 매개변수 중 하나인 글꼴이 당연히 매우 중요한 역할을 하기 때문이다.

안녕하세요 여러분~ 최근 웹페이지에서 글꼴을 선택하는 방법에 대한 문제를 언급하시는 분들이 많습니다. 문제는 작지만 프론트엔드 개발에서는 기본이다. 왜냐하면 현재의 웹페이지는 여전히 텍스트 정보가 지배하고 있고, 텍스트 표현의 가장 중요한 매개변수 중 하나인 글꼴이 당연히 매우 중요한 역할을 하기 때문이다. 오랫동안 폰트의 중요성이 충분히 주목받지 못한 점은 아쉽습니다. 많은 사람들의 글꼴 개념은 여전히 ​​"宋体", Arial, Helvetica, serif 등 글꼴 계열 단계에 머물러 있지만 이 설정이 왜 만들어졌는지, 이 설정이 합리적인지 등을 이해하지 못합니다. 이제 글꼴의 세부 사항에 대해 이야기하겠습니다.

-font-family

CSS 규칙에서 글꼴을 정의하는 것은 font-family 규칙을 통해 이루어진다는 것을 누구나 알고 있습니다. CSS 문서를 주의 깊게 살펴보았지만 특정 글꼴을 지정하는 규칙을 찾지 못했습니다.

10년 전에는 다음과 유사한 코드를 어디에서나 볼 수 있었습니다.

<font face="Frankin Gothic Book">Lorem Ipsum font>

Frankin Gothic Book이 Windows 전용 글꼴이라고 생각하는 사람은 거의 없습니다. Mac에서는 Frankin Gothic Book 글꼴의 효과를 전혀 볼 수 없습니다. 시스템에서 이 글꼴을 찾을 수 없기 때문에 Mac의 기본 글꼴을 사용하여 표시합니다. 결과적으로 웹페이지의 스타일은 원본과 완전히 다르며 Frankin Gothic Book의 효과를 전혀 얻을 수 없습니다. 그래서 W3C는 글꼴 세트라는 개념을 제안했습니다. 일련의 유사한 글꼴이 우선순위에 따라 목록으로 구성되며, 브라우저는 사용 가능한 첫 번째 글꼴을 찾을 때까지 목록의 선두부터 일치를 시작하고 해당 글꼴을 표시에 사용합니다. .

예를 들어, 위의 예에서 다음과 같은 글꼴 세트를 만들 수 있습니다:

<span style='font-family: "Franklin Gothic Book","Lucida Grande"' >Lorem Ipsumspan>

• 브라우저가 이 텍스트를 어떻게 렌더링하는지 살펴보겠습니다.

• 
  

Windows에서: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. Frankin Gothic Book은 시스템에 존재하며 Frankin Gothic Book 글꼴을 사용하여 표시됩니다.
Mac의 경우: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. - Frankin Gothic Book이 시스템에 존재하지 않아 검색이 실패합니다. 다음 글꼴인 Lucida Grande를 계속 검색하세요. 시스템에 Lucida Grande 글꼴이 존재하며 검색이 종료되고 Lucida Grande 글꼴이 표시됩니다.

따라서 Mac에서는 이 텍스트를 Frankin Gothic Book과 유사한 Lucida Grande 글꼴로 표시할 수 있습니다.

그러나 Frankin Gothic Book 글꼴이나 Lucida Grande 글꼴이 없는 컴퓨터가 있을 수 있으므로 여전히 위의 텍스트를 올바르게 표시하지 못할 수 있습니다. 결과적으로 개발자는 다양한 시스템에 적응하기 위해 이 글꼴 목록에 글꼴을 지속적으로 추가해야 하며, 이로 인해 이 글꼴 세트는 "유사한 글꼴 정리"라는 원래 기능을 잃게 됩니다. 그래서 우리가 흔히 볼 수 있는 serif, sans-serif에 해당하는 "universal 글꼴군"이 글꼴 세트에 도입되었습니다. 이 두 가지 글꼴은 다른 일반 글꼴 모음과 마찬가지로 향후 기사에서 자세히 소개하겠습니다. 여기서는 간단히 "지정된 글꼴이 모두 유효하지 않을 때 브라우저가 지정한 최종 대체 글꼴"로 이해하면 됩니다.

예를 들어 위의 샘플 텍스트를 개선해 보겠습니다.

<span style='font-family: "Franklin Gothic Book","Lucida Grande", sans- serif'>Lorem Ipsumspan>

• 브라우저가 이 개선된 텍스트를 어떻게 렌더링하는지 살펴보겠습니다.

• 
  

• Windows에서: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. Frankin Gothic Book은 시스템에 존재하며 Frankin Gothic Book 글꼴을 사용하여 표시됩니다.

• Mac의 경우: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. - Frankin Gothic Book이 시스템에 존재하지 않아 검색이 실패합니다. 다음 글꼴인 Lucida Grande를 계속 검색하세요. 시스템에 Lucida Grande 글꼴이 존재하며 검색이 종료되고 Lucida Grande 글꼴이 표시됩니다.

• 일부 시스템: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. - Frankin Gothic Book이 시스템에 존재하지 않아 검색이 실패합니다. 다음 글꼴을 계속 검색하세요. Lucida Grande 글꼴이 시스템에도 존재하지 않습니다. 다음 글꼴인 범용 글꼴 sans-serif를 계속 검색하세요. 브라우저는 기본 산세리프 글꼴인 "Arial"을 사용하여 이 텍스트를 표시합니다.

두 가지 점에 유의해주세요. 우선, 범용 글꼴군이 어떤 글꼴에 해당하는지는 브라우저에 따라 결정됩니다. 위의 예에서 브라우저는 Arial을 산세리프 글꼴로 지정했지만, 다른 브라우저가 Helvetica를 산세리프 글꼴로 지정했을 가능성은 전적으로 가능합니다. 최종적으로 어떤 글꼴이 사용될지는 예측할 수 없습니다. 둘째, 범용 글꼴 모음은 글꼴 세트의 다른 글꼴이 유효하지 않을 때 간단히 삽입할 수 있는 솔루션입니다. 따라서 -

디자이너는 가능한 모든 시스템을 포괄하는 완전한 글꼴 세트를 제공하기 위해 최선을 다해야 하며 범용 글꼴 모음에 의존해서는 안 됩니다.

다음과 유사한 두 가지 쓰기 방식은

잘못입니다.

<span style="font-family:sans-serif">Lorem Ipsumspan>
<span style="font-family:sans-serif,Arial">Lorem Ipsumspan>

첫 번째 작성 방법의 실수는 글꼴을 전혀 지정하지 않는 것과 동일하며 글꼴 선택은 여전히 ​​브라우저에 맡긴다는 것입니다. 글쓰기는 쓰지 않는 것과 같습니다.

두 번째 작성 방법의 오류는 순서에 있습니다. 범용 글꼴 모음은 글꼴 세트의 다른 모든 글꼴이 비활성화된 경우에만 작동해야 하기 때문입니다. 따라서 지정된 글꼴을 범용 글꼴 뒤에 배치하면 지정된 글꼴이 일치하지 않을 때 범용 글꼴이 사용됩니다. 따라서 유니버설 글꼴이 글꼴 세트의 마지막 글꼴인지 확인해야 합니다.

여기서 설명드릴 내용은 2가지 입니다.

우선, 브라우저에서 어떤 글꼴을 사용해야 하는지에 대한 규칙은 간단해 보이지만 실제로는 매우 까다롭습니다. 앞으로의 기사에서 구체적인 지침을 제시하겠습니다.

둘째, 글꼴의 CSS 규칙 이름을 Font-family라고 하지만 본질적으로 인쇄 의미에서 글꼴 모음이 아니라 글꼴 세트입니다. 인쇄 시 글꼴 모음은 Lucida Family(Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande 등 포함) 및 Arial Family(Arial, Arial Black, Arial Rounded 등)와 같은 동일한 서체의 다양한 강도 조합을 나타냅니다. MT 등)), 그러나 분명히 이러한 글꼴 모음은 글꼴 세트로 직접 사용하기에는 적합하지 않습니다.

위 내용은 웹 디자인의 글꼴 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!