CSS 글꼴 크기 조정으로 웹 타이포그래피를 개선하십시오

CSS

속성 : 웹 페이지 조판의 가독성을 향상시키는 강력한 도구

CSS 속성을 사용하면 개발자가 대문자 높이가 아닌 소문자 높이에 따라 글꼴 크기를 지정할 수 있도록하여 특히 대체 글꼴을 사용할 때 웹 텍스트의 가독성을 크게 향상시킬 수 있습니다. font-size-adjust 이 기사는 속성의 중요성과 프로젝트에서의 올바른 사용을 심도있게 탐구 할 것입니다.

font-size-adjust 의 중요성 대부분의 웹 사이트는 주로 텍스트로 구성됩니다. 텍스트는 웹 사이트에서 중요하기 때문에 사용 된 글꼴에 특별한주의를 기울여야합니다. 올바른 글꼴을 선택하면 유쾌한 독서 경험이 생길 수 있습니다. 그렇지 않으면 웹 사이트를 읽기 어려울 수 있습니다. 글꼴을 결정한 후에는 일반적으로 적절한 글꼴 크기를 선택해야합니다.

속성 웹 사이트에서 모든 글꼴 시리즈의 글꼴 크기를 설정합니다. 그러나, 그것은 종종 선호하는 글꼴 가족을 위해 선택됩니다. 문제는 선호하는 글꼴을 어떤 이유로 든 사용할 수 없을 때 발생합니다. 브라우저는 CSS 문서에 나열된 대체 글꼴 중 하나를 사용하여 텍스트를 렌더링합니다.

예를 들어, 다음 CSS 규칙이 주어지면 font-size-adjust 브라우저가 Google Fonts에서 "Lato"를 다운로드 할 수없는 경우 다음 대체 글꼴 인 Verdana가 대신 사용됩니다. 그러나

값은 Verdana가 아닌 "lato"를 고려하여 선택 될 가능성이 높습니다.

웹 글꼴의 종횡비 font-size-adjust 일정한 글꼴 크기 값의 경우 글꼴의 시각적 크기 및 가독성이 크게 다를 수 있습니다. 이것은 대사하는 라틴어와 같은 텍스트의 경우에 특히 그렇습니다. 이 경우, 소문자 문자 높이 대 대문자 높이의 비율은 글꼴의 가독성을 결정하는 데 중요한 요소입니다. 이 비율을 종종 글꼴의 종횡비라고합니다. 앞에서 언급 한 바와 같이 이 경우

속성은 모든 글꼴의 x 높이를 동일한 값으로 설정하여 가독성을 향상시킬 수 있기 때문에 매우 중요합니다.

적절한 font-size 를 선택하십시오 이제

속성을 ​​사용하는 것의 중요성을 이해하려면 웹 사이트에서 사용하는 방법을 배우십시오. 이 속성에는 다음과 같은 구문이 있습니다

의 초기 값은

body {
  font-family: 'Lato', Verdana, sans-serif;
}

입니다.

값은 다른 글꼴 시리즈의 font-size 값이 조정되지 않음을 의미합니다.

당신은 또한

속성의 값을 숫자로 설정할 수 있습니다. 이 숫자는 웹 페이지의 모든 글꼴의 x 높이를 동일한 값으로 계산하는 데 사용됩니다. x 높이는 주어진 숫자에 글꼴 크기를 곱합니다. 이것은 작은 크기 글꼴의 가독성을 크게 향상시킬 수 있습니다. 다음은 font-size-adjust 속성을 ​​사용하는 방법의 예입니다. font-size-adjust 모든 글꼴의 x 높이는 이제 20px * 0.6 = 12px입니다. 주어진 글꼴의 실제 크기는 이제 X 높이가 항상 12px로 유지되도록 변경할 수 있습니다. 주어진 글꼴의 새로운 조정 글꼴 크기는 다음 공식을 사용하여 계산할 수 있습니다. c = (a / a ') s.

여기, C는 사용될 조정 된 글꼴 크기이고, s는 지정된 글꼴 크기 값, a는

body {
  font-family: 'Lato', Verdana, sans-serif;
}

속성에 의해 지정된 종횡비이며, a '는 필요한 글꼴의 종횡비입니다. 조정.

당신은

를 음수 값으로 설정할 수 없습니다. 0의 값은 텍스트에 높이가 없을 것입니다. 즉, 텍스트는 실제로 숨겨집니다. Firefox 40과 같은 구형 브라우저에서 0의 값은

로 를 설정하는 것과 같습니다.

대부분의 경우 개발자는 일반적으로 주어진 글꼴에 가장 적합한 값을 확인하기 위해 여러 글꼴 크기 값을 시도합니다. 이것은 이상적으로 모든 글꼴 옵션의 x 높이가 선호하는 글꼴의 x 높이와 같기를 의미합니다. 다시 말해,

속성에 가장 적합한 값은 선호하는 글꼴의 종횡비입니다. font-size-adjust

글꼴의 종횡비를 결정하는 방법

글꼴의 올바른 종횡비를 결정하려면 크기가 큰 글꼴 크기가 지정한 원래 글꼴 크기와 동일해야한다는 사실에 의존 할 수 있습니다. 이것은 이전 방정식에서 a '가 a'와 같아야 함을 의미합니다. font-size-adjust 종횡비를 계산하는 첫 번째 단계는 두 가지 요소를 만드는 것입니다. 두 요소 모두 단일 문자와 주변 테두리가 포함됩니다 (두 글자는이 두 요소를 비교해야하기 때문에 동일해야합니다). 또한, 두 요소의 속성 값은 동일하지만 그중 하나만 font-size-adjust 속성을 ​​사용합니다. 의 값이 주어진 글꼴의 종횡비와 같으면 각 요소의 두 글자의 크기는 동일합니다. none 웹 사이트에서

font-size-adjust에서 사용하십시오 브라우저 지원 : 현재 Firefox만이 기본적으로

를 지원합니다. 버전 43 및 30부터 시작하여 Chrome 및 Opera는 실험 웹 플랫폼이 플래그 (Chrome : // 플래그에서 활성화) 후이 속성을 지원합니다. Edge와 Safari는

속성을 ​​전혀 지원하지 않습니다. 이 속성을 사용하기로 결정한 경우 브라우저 지원이 낮은 것은 전혀 문제가되지 않아야합니다. 이 속성은 후진 호환성을 염두에두고 설계되었습니다. 이 속성을 지원하지 않는 브라우저는 정상적으로 텍스트를 표시하는 반면,이 속성을 지원하는 브라우저는 속성의 값에 따라 글꼴 크기를 조정합니다.

결론

이 튜토리얼을 읽은 후, 이제

속성의 역할, 그 중요성 및 다른 글꼴의 종횡비를 계산하는 방법을 알 수 있습니다. font-size-adjust

는 이전 브라우저에서

를 우아하게 다운 그레이드 할 수 있으므로 프로덕션 웹 사이트에서 텍스트의 가독성을 향상시키기 위해 즉시 사용을 시작할 수 있습니다. font-size-adjust

(기사 끝의 그림은 기사의 시작과 동일합니다)

위 내용은 CSS 글꼴 크기 조정으로 웹 타이포그래피를 개선하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!