자바스크립트 글꼴 패밀리 목록

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo

웹 페이지의 텍스트 서식 지정은 웹 디자인의 중요한 부분입니다. 예를 들어 헤더를 특정 글꼴로 표시하거나 페이지의 모든 텍스트가 serif 글꼴을 사용하도록 할 수 있습니다.

여기서 CSS가 글꼴 위치: 가족이 작동합니다. CSS font-family 속성을 사용하면 웹 페이지에서 텍스트의 스타일을 지정하는 데 사용할 하나 이상의 글꼴 모음을 지정할 수 있습니다.

이 튜토리얼에서는 CSS의 예를 참조하여 기본 사항을 다룹니다. font-family 및 속성을 사용하여 웹페이지의 텍스트 스타일을 지정하는 방법.

CSS Font Family

CSS에서 글꼴 스타일 지정과 관련된 많은 측면이 있습니다. 색상 설정에서 크기까지. 경찰. 그러나 글꼴 스타일의 가장 중요한 부분 중 하나는 웹페이지의 텍스트가 사용하는 스타일인 글꼴 모음을 정의하는 것입니다.

텍스트가 사용하는 글꼴 모음을 정의합니다. 웹 페이지에서 font-family 속성을 사용할 수 있습니다. font-family 속성의 구문은 다음과 같습니다.

font-family 속성은 단일 글꼴 또는 글꼴 목록을 허용합니다. 둘 이상의 문자를 지정하는 경우 각 문자를 쉼표로 구분해야 합니다.

문자가 표시되는 순서는 브라우저에서 문자를 적용하려고 시도하는 순서입니다. 브라우저는 웹 브라우저에서 설치되었거나 다운로드할 수 있는 목록의 첫 번째 글꼴로 기본 설정됩니다. 이 문자를 사용할 수 없는 경우 두 번째 문자가 사용되는 식입니다.

그것은 font-family 속성은 텍스트 블록의 각 문자에 대한 글꼴을 선택합니다. 그런 다음 글꼴에서 특정 문자를 사용할 수 없는 경우 적절한 문자를 찾을 때까지 패밀리 목록에서 글꼴의 다음 글꼴을 시도합니다.

글꼴 굵기를 사용할 때 적어도 하나의 성을 일반 글꼴(예: serif, sans-serif 또는 고정 폭)을 포함하는 것이 가장 좋습니다. 이렇게 하면 목록에 있는 다른 글꼴을 사용할 수 없는 경우에도 브라우저가 웹페이지의 텍스트에 표시할 글꼴을 선택할 수 있습니다.

사용할 수 있는 방법에는 두 가지가 있습니다. 글꼴 패밀리 속성입니다. 먼저 속성을 사용하여 웹 페이지에 대한 사용자 정의 글꼴을 지정할 수 있습니다. 둘째, 속성을 사용하여 웹 페이지의 텍스트에 일반 글꼴 모음을 적용할 수 있습니다. font-family 속성과 함께 사용할 수 있는 일반 글꼴 패밀리는 다음과 같습니다.

• serif: 글꼴은 serif 글꼴을 사용합니다(예: Lucida Bright, Palladio).
• sans-serif: 글꼴은 sans-serif 글꼴을 사용합니다(예: Open Sans, Trebuchet MS).
• 모노스페이스: 문자의 너비는 모두 동일합니다(예: 미니밴, Menlo).
• 기울임꼴: 문자에 하이픈이 있습니다(예: Lucida Calligraphy).
• 판타지: 글꼴에 주의를 끌기 위해 사용되는 장식 글꼴(예: Papyrus).

다음이 있습니다. Mozilla CSS 글꼴 패밀리 문서 .

이제 font-family 속성의 기본 사항을 알았으므로 작동 방식에 대한 몇 가지 예를 볼 수 있습니다. .

CSS 글꼴 모음의 예

한 지역 우표가 우리 클럽인 Seattle Stamp Club에 일부 글꼴을 사용자 정의하도록 요청했습니다. 그들의 웹사이트.

우선, "연락처" 페이지에 있는 모든

헤더의 글꼴을 "Open Sans"를 사용하도록 변경하라는 요청을 받았습니다. 폰트. 따라서 예를 들어 웹사이트의 "연락처" 페이지에 있는 "연락처"가 Open Sans에 나타나야 합니다. 이 글꼴을 사용할 수 없는 경우 일반 "sans-serif" 패밀리를 사용해야 합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

클릭 " noscript> 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인합니다. .

HTML 코드에서 문의하기 텍스트가 포함된

태그를 사용하여 헤더를 지정했습니다. 따라서 CSS 코드에서 웹 페이지의

요소에 대한 글꼴을 설정하는 글꼴 모음.

font-family 속성에 할당한 값은 의 모든

요소에 대한 글꼴을 설정합니다. Sans를 열고 이 글꼴을 사용할 수 없는 경우 일반 sans-serif 계열이 사용됩니다. 이를 위해 쉼표로 구분된 두 개의 문자를 지정했습니다.

이제 Times 글꼴을 사용하기 위해 스탬프 클럽의 페이지 연락처 의 모든 문자

요소에도 스타일을 적용하려고 한다고 가정합니다. 이 글꼴을 사용할 수 없는 경우 기본 serif 글꼴을 사용해야 합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

클릭 24" <너비 "높이 = 24" 클래스 = wp-image-13930 "스타일 = 너비: 24픽셀; " src = "https://744025.smushcdn.com/1245953/wp-content/uploads /2020/03/iconfinder_play-circle-outline_326584.png?lossy=1&strip=1&webp=1" alt = `"코드 실행" 버튼 이미지 n, 원 안의 삼각형 `srcset =" https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584-20x20.png? 손실 = 1 & 스트립 = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png?lossy=1&strip=1&webp= 24w " size = "(최대 - 너비: 24px) 100vw, 24px"> 위의 코드 편집기에서 HTML/CSS 코드의 출력을 확인합니다.

이 예에서는

태그를 사용하여 텍스트 단락을 선언했습니다. 다음으로, CSS 스타일시트에 있는 모든

태그의 글꼴 패밀리를 정의하여 Times 및 serif 글꼴입니다. 기본적으로 브라우저는 모든

태그를 Times 글꼴로 표시하려고 시도합니다. 이 글꼴을 사용할 수 없는 경우 serif 글꼴이 사용되었습니다.