CSS의 Fonts 속성 예에 대한 자세한 설명

세리프체와 산세리프체의 차이점

컴퓨터 화면에서는 산세리프체가 세리프체보다 읽기 쉽다고 여겨진다

CSS 글꼴

CSS에는 두 가지 유형의 글꼴 계열 이름이 있습니다.

유니버설 글꼴 계열 - 유사한 모양을 갖는 글꼴 시스템의 조합(예: "Serif" 또는 "Monospace")

특정 글꼴 계열 - 특정 글꼴 계열(예: "Times" 또는 "Courier")

글꼴 계열

글꼴 계열 속성 설정 텍스트의 글꼴 모음입니다.

font-family 속성은 "대체" 메커니즘으로 여러 글꼴 이름을 설정해야 하며, 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하게 됩니다.

참고: 글꼴 모음 이름이 두 문자 이상인 경우 글꼴 모음: "宋体"과 같이 따옴표로 묶어야 합니다.

여러 글꼴 모음은 쉼표로 구분하여 지정됩니다.

예

p{font-family:"Times New Roman", Times, serif;}

더 일반적으로 사용되는 글꼴 조합을 보려면 웹보안 글꼴 조합을 확인하세요. .

글꼴 스타일

은 주로 이탤릭체 텍스트의 글꼴 스타일 속성을 지정하는 데 사용됩니다.

이 속성에는 세 가지 값이 있습니다.

Normal - 텍스트를 정상적으로 표시합니다.

Italic - 텍스트를 기울임꼴로 표시합니다.

Slanted text - 텍스트를 옆으로 표시합니다. 기울임꼴(기울임꼴과 매우 유사하지만 지원 수준이 낮음)

인스턴스

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

글꼴 크기

글꼴 크기 속성은 텍스트의 크기를 설정합니다.

웹 디자인에서는 텍스트 크기를 관리하는 능력이 매우 중요합니다. 그러나 단락이 제목처럼 보이도록 글꼴 크기를 조정하거나 제목이 단락처럼 보이도록 조정할 수는 없습니다.

제목에는

, 단락에는

에 올바른 HTML 태그를 사용하세요.

글꼴 크기 값 절대적이거나 상대적인 크기여야 합니다.

절대 크기:

텍스트를 지정된 크기로 설정

사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록 허용

물리적 크기 결정 절대 크기는

상대 크기 조정:

주변 요소에 상대적인 크기 설정

사용자가 브라우저에서 텍스트 크기를 변경할 수 있도록 허용

할 때 유용합니다.

글꼴 크기를 지정하지 않으면 기본 크기는 일반 텍스트 단락과 동일하며 16픽셀(16px=1em)입니다.

글꼴 크기를 픽셀 단위로 설정

텍스트 크기를 픽셀 단위로 설정하면 텍스트 크기를 완전히 제어할 수 있습니다.

예

h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}

위의 예는 다음과 같습니다. Internet Explorer 9, Firefox, Chrome, Opera 및 Safari에서 텍스트 크기를 조정합니다.

참고: 위 예제는 IE9 이전 버전에서는 실행할 수 없습니다.

브라우저의 확대/축소 도구를 통해 텍스트 크기를 조정할 수 있지만 이 조정은 텍스트뿐만 아니라 전체 페이지에 적용됩니다.

em을 사용하여 글꼴 크기 설정

Internet Explorer에서 텍스트 크기를 조정할 수 없는 문제를 피하기 위해 많은 개발자는 픽셀 대신 em 단위를 사용합니다.

W3C에서는 em 크기 단위를 권장합니다.

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다.

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置

元素的默认字体大小的是百分比：

实例

body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

위 내용은 CSS의 Fonts 속성 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!