CSS 자습서: 웹 페이지 글꼴 및 글꼴 크기 디자인

글꼴 크기

CSS2 사양 길이 가로 및 세로 크기에 따라 글꼴을 정의 합니다. 이 길이 숫자 값 이며 옵션 플러스 앞 수 있습니다 (+) 또는 빼기 (-) 표시. 또한, 값 옵션 단위 식별자를 할 수 있습니다.
또한, CSS2 사양 정의 두 단위 유형: 절대 단위와 상대 단위로. 절대값 지정 단위, 하 고 상대 단위는 다른 값에 비례 하는 값을 지정 합니다. 다음 목록에는 상대 단위 식별자 나열:

EM: 요소 글꼴의 높이입니다. 그것은 같은 글꼴을 사용 하 여 요소의 글꼴 크기 속성 값을 평가 합니다. 글꼴 크기 속성 값 자체에 나타나면는 부모 요소의 글꼴 크기를 참조 예외가 발생 합니다.

(높이) ex: 소문자의 높이 CSS2 사양 설명 x.

PX (픽셀): 배경 또는 화면 해상도 관련. 사용자 기본 설정으로 인해 다른 픽셀의 디스플레이 해상도 출력에 따라 디스플레이 해상도 크게 달라질 수 있습니다.

다음은 유효한 절대 단위 식별자입니다.
(인치)
CM (cm)
밀리미터 (mm)
태평양 표준시 (점, 1 o ' = 1/72 인치)
PC (12 포인트 무버블 타입, 1pc = 12 포인트)

절대 크기를 측정 하는 또 다른 방법은 다음과 같은 키워드를 적용 하는 것입니다: 최소, 작은, 작은, 중간, 큰, 대형, 및 최소 값을 측정 하는 비례 요소를 사용 하 여. 으로 기본 값을 증가 요인, 요소를 더 작은. CSS2 사양에 정의 된 축척 1.2, 이며이 값은 브라우저에 따라 다를 수 있습니다.

또한 텍스트의 서식을 지정 하는 백분율 값을 적용할 수 있습니다. 백분율 값은 선택적 마커, 백분율 기호 (%)입니다. 백분율 값은 항상 다른 값에 비례. 경우에 글꼴, 그것은 웹 페이지의 기본 글꼴 크기에 비례입니다.

당신이 볼 수 있듯이,이 겉보기에 간단한 작업 텍스트 렌더링의 많은 방법이 있다. 다음 HTML 형식 (텍스트 단락 요소)에 다양 한 단위 식별자 적용 됩니다. 이러한 값의 모두 평등 하며 72dpi에 표시 됩니다 것으로 간주 됩니다.

< html >
< 헤드 >
< 제목 > 글꼴 크기 조정-동등한 값 < / 타이틀 >
</헤드 >
< 몸 >
< p 스타일 = "글꼴-크기: 36PT;" > 포인트 </p >
< p 스타일 = "글꼴-크기: 3pc;" > 피 </p >
< p 스타일 = "글꼴-크기: 0.5;" > 인치 </p >
< p 스타일 = "글꼴-크기: 1.27 cm;" > 센티미터 </p >
< p 스타일 = "글꼴-크기: 12.7 m m;" > 밀리미터 </p >
< p 스타일 = "글꼴-크기: 300%;" > 비율 </p >
</바디 >
< / html >

목록에 픽셀 값을 추가할 수 있지만 그 값 환경에 따라 달라 집니다. 예를 들어 1280 x 1024 해상도와 내 노트북 위의 표에 사용 되는 50 픽셀 값에 일치 하는 텍스트를 표시 합니다.

앞에서 언급 한 글꼴 크기의 더 많은 지식을 얻으려면 CSS2 규격을 읽기. 이제 웹 응용 프로그램에서 사용 하는 방법을 결정 하는 것에 대 한 얘기 하자.

어떤 방법을 선택합니다

많은 옵션이 글꼴 관련 css, 하지만 어느 쪽이 당신의 네트워크 응용 프로그램에 대 한 최고의? 절대 크기, 특히 일관성, 유연성, 및 접근성에에서 많은 결함이 있다. 절대 글꼴 크기 반대 시각 장애인된 사용자를 읽기 쉽게 만들기 페이지에서 텍스트를 확대 하려면 상대 글꼴 크기를 사용할 수 있습니다. 그 결과, 개발자는 종종 상대 크기를 사용합니다.

자세하게에서 상대적 크기를 살펴 봅시다:

픽셀은 가장 일반적인 크기 값입니다. 대부분의 브라우저 지원, 항상은 아니지만. 브라우저는 종종 CSS 픽셀 아니라 스크린 픽셀 픽셀 취급. 픽셀의 하나의 단점은 무시 하거나 부정 사용자의 기본 설정을 IE에서 크기를 조정할 수 없습니다.

글꼴 크기를 측정 하기 위해 포인트를 사용 하 여 선호 하는 많은 개발자 하지만 요점은 주로 네트워크에 마이그레이션할 쉽지 않은 데스크톱 인쇄 시스템에 대 한. 운영 체제 또는 브라우저 텍스트를 렌더링할 때 기본적으로 픽셀을 사용 합니다.

가장 일반적인 방법은 그들 또는 백분율 크기를 사용 하는 것입니다. EM 크기를 지 원하는 모든 브라우저에서 조정할 수 있습니다. 그들은 또한 사용자 기본 설정의 기본 크기에 따라 달라 집니다. IE에서 EM 적용의 결과 예측할 수 없습니다. 이 IE에서 백분율을 사용 하 여 텍스트 크기를 설정 하는 좋습니다.

다음 예제에서는 EM 및 백분율 값을 사용 하 여 텍스트 서식을. 기본 텍스트는 백분율 값에서 설정 하 고 그들을 조정.

< html >
< 헤드 >
< 제목 > 디스플레이 테스트 </타이틀 >
< 스타일 형식을 "Text/css" = >
몸 {글꼴: san Serif, Arial; 글꼴-크기: 110%}
< / 스타일 >< / 머리 >< 몸 >
< p 스타일 = "글꼴-크기: 1.0EM;" > 기본 텍스트. </p >
< p 스타일 = "글꼴-크기: 1.5EM;" > 큰 텍스트. </p >
< p 스타일 = "글꼴-크기: 0.5EM;" > 작은 텍스트. </p >
</바디 >
< / html >

그것은 외모에 대 한 모든입니다.

기존 표준 서식을 지정 하 고 네트워크 응용 프로그램에 텍스트를 렌더링 하는 여러 가지를 제공 합니다. 개발자는 상대적이 고 절대적인 식별자로 텍스트를 분해 쉽게 수 있습니다. 열쇠는 일관 되 고 철저 하 게 솔루션을 감지 하는.