CSS 글꼴 속성 선택 가이드: 글꼴 계열 및 글꼴 크기의 올바른 사용-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 글꼴 속성 선택 가이드: 글꼴 계열 및 글꼴 크기의 올바른 사용

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 20, 2023 am 10:09 AM

글꼴 속성(글꼴) 글꼴 모음 글꼴 크기

CSS 字体属性选择指南：font-family 和 font-size 的正确使用

CSS 글꼴 속성 선택 가이드: 글꼴 모음과 글꼴 크기를 올바르게 사용하려면 특정 코드 예제가 필요합니다.

소개:

웹 디자인에서 글꼴 선택은 중요한 측면입니다. 적절한 글꼴은 웹 페이지의 가독성과 미적 특성을 향상시킬 수 있습니다. CSS에서는 글꼴 계열 및 글꼴 크기 속성을 통해 글꼴 스타일과 크기를 제어할 수 있습니다. 그러나 이 두 가지 속성을 올바르게 사용하는 것은 어려운 작업입니다. 이 문서에서는 올바른 글꼴 스타일과 글꼴 크기를 선택하는 방법을 보여주고 몇 가지 구체적인 코드 예제를 제공합니다.

1. 글꼴 계열 글꼴 스타일 선택 가이드:

범용 글꼴 계열 사용:

글꼴 스타일을 선택할 때 범용 글꼴 계열 사용을 우선시해야 합니다. "serif", "sans-serif", "monospace" 등 이러한 글꼴 모음은 글꼴 유형의 전반적인 스타일을 정의하며 다양한 운영 체제 및 장치에 일관된 효과를 표시할 수 있습니다. 다음은 몇 가지 일반적인 일반 글꼴 모음입니다.

body {
  font-family: serif;
}

h1 {
  font-family: sans-serif;
}

code {
  font-family: monospace;
}

로그인 후 복사

특정 글꼴 이름 지정:

특정 글꼴 스타일을 사용해야 하는 경우 글꼴 이름을 지정하면 됩니다. 시스템에 기본적으로 설치되는 글꼴을 선택해 보세요. 사용자 시스템에 글꼴이 없으면 브라우저는 대신 대체 글꼴을 사용합니다. 다음은 글꼴 이름을 지정하는 예입니다.

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

로그인 후 복사

사용자 정의 글꼴 사용:

웹 페이지에서 사용자 정의 글꼴을 사용하려면 @font-face를 통해 글꼴 파일을 로드할 수 있습니다. 규칙 . 글꼴 파일을 서버에 배치하고 상대 또는 절대 경로를 사용하여 참조합니다. 다음은 사용자 정의 글꼴을 로드하는 예입니다. @font-face 规则来加载字体文件。将字体文件放在服务器上，并使用相对或绝对路径来引用它。以下是一个加载自定义字体的示例：

@font-face {
  font-family: "MyFont";
  src: url("myfont.ttf");
}

h1 {
  font-family: "MyFont", sans-serif;
}

로그인 후 복사

二、font-size 字体大小选择指南：

使用相对单位：

在设置字体大小时，使用相对单位是一个良好的实践。相对单位可以根据用户的设备和偏好来自动调整字体大小。以下是一些常见的相对单位：

em：相对于父元素的字体大小
rem：相对于根元素（通常是 <html> 元素）的字体大小
%：相对于父元素的百分比

body {
  font-size: 1em;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 120%;
}

로그인 후 복사

使用绝对单位：

在某些情况下，您可能需要使用固定的字体大小。在这种情况下，可以使用绝对单位，如 px，pt 或 rem

h1 {
  font-size: 24px;
}

p {
  font-size: 16pt;
}

로그인 후 복사

2. 글꼴 크기 글꼴 크기 선택 가이드:

글꼴 크기를 설정할 때 상대 단위를 사용하는 것이 좋습니다. 상대 단위는 사용자의 장치 및 기본 설정에 따라 글꼴 크기를 자동으로 조정합니다. 다음은 몇 가지 일반적인 상대 단위입니다.

em

rem

&lt) ;html>

%

h1 {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 16px;
  }
}

로그인 후 복사

🎜🎜절대 단위 사용: 🎜🎜🎜어떤 경우에는 다음을 사용할 수 있습니다. 고정된 글꼴 크기. 이 경우 px, pt 또는 rem과 같은 절대 단위를 사용할 수 있습니다. 다음은 절대 단위를 사용하는 예입니다. 🎜rrreee🎜🎜반응형 글꼴 크기: 🎜🎜🎜다양한 화면 크기와 기기에서 최적의 글꼴 크기를 얻으려면 CSS 미디어 쿼리와 속성 보간을 사용할 수 있습니다. 예를 들어 글꼴 크기는 화면 너비에 따라 자동으로 조정될 수 있습니다. 다음은 반응형 글꼴 크기의 예입니다. 🎜rrreee🎜 결론: 🎜🎜 글꼴 스타일과 글꼴 크기를 올바르게 선택하는 것은 웹 디자인에서 중요한 작업입니다. 적절한 글꼴 스타일과 관련 단위를 사용하면 웹 페이지의 가독성과 미적 특성을 보장할 수 있습니다. 동시에 글꼴 이름을 지정하고 사용자 정의 글꼴을 로드하면 보다 개인화되고 독특한 디자인 효과를 얻을 수 있습니다. 이 문서에 제공된 지침과 예제가 글꼴 스타일과 글꼴 크기를 올바르게 선택하고 사용하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 CSS 글꼴 속성 선택 가이드: 글꼴 계열 및 글꼴 크기의 올바른 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.