CSS 및 글꼴 제어 속성을 사용하여 멋진 웹사이트 구축

과거에는 웹페이지의 글꼴을 수정한다는 것은 일반적으로 관련 텍스트를 태그에 중첩하고 속성을 사용하여 색상, 크기 및 스타일을 제어하는 ​​것을 의미했습니다. 오늘날 이 접근 방식은 시각적 스타일과 실제 콘텐츠 마크업을 혼합하기 때문에 더 이상 인식되지 않습니다. 오늘은 CSS(Cascading Style Sheet)라는 별도의 파일에 글꼴 스타일 정보를 집중시키는 방법을 권장합니다.

글꼴 정보를 단일 CSS 파일에 집중시키는 것은 많은 분명한 이점을 가지고 있습니다. 작동하기 쉽고 특별한 소프트웨어가 필요하지 않으며 대부분의 주요 브라우저에서 균일하게 작동합니다. 게다가 정보가 한 곳에 집중되어 있기 때문에 웹 페이지의 시각적 모양을 쉽게 수정할 수 있습니다. 기본 스타일 시트의 글꼴이나 색상만 변경하면 변경 사항이 즉시 전체 페이지에 "계속 적용"됩니다. 대지.

재미있을 것 같죠? 따라서 이 기사에서는 이전 요소를 대체하도록 설계된 CSS 글꼴 속성에 대해 논의할 것이므로 계속 읽어보시기 바랍니다. HTML 페이지의 글꼴, 색상, 텍스트 크기 및 간격을 중앙 집중식으로 제어해야 하는 경우 활용할 수 있는 강력한 도구입니다.

제어 유형

글꼴 속성은 해당 요소에서 사용되는 글꼴을 정의합니다. 이 속성에는 일반적으로 쉼표로 구분된 글꼴 이름 목록이 포함됩니다. 공백이 포함된 이름은 따옴표로 묶을 수 있습니다. 적용하면 브라우저는 목록에서 찾은 첫 번째 글꼴을 사용하거나 유효한 글꼴이 없는 경우 기본 표준 브라우저 글꼴을 사용합니다.

목록 A는 이 명령의 적용 예입니다.

목록 A

그림 A는 출력을 보여줍니다.

그림 A

Font_family

이 지시어는 클라이언트 시스템에 의해 표시되는 글꼴에 크게 의존한다는 점을 기억하는 것이 중요합니다. 위의 예에서 시스템이 Bookman Old Style 및 Verdana 글꼴을 표시하지 않으면 기본 브라우저 글꼴이 사용됩니다. 이 문제를 방지하려면 특수 글꼴 이름 목록 뒤에 serif, sans-serif 또는 필기체와 같은 일반 글꼴 이름 목록을 추가하는 것이 가장 좋습니다. 이렇게 하면 브라우저가 해당 글꼴 클래스에서 가장 일치하는 글꼴을 사용하도록 지시합니다. . 목록 B는 위의 문제를 정확하게 해결하는 위 예제의 수정된 버전입니다.

목록 B