참고 :이 페이지는 웹 페이지의 글꼴 유형, 크기 및 색상 변경과 관련이 있습니다. Microsoft Word의 경우 Word에서 글꼴 색상, 크기 또는 유형을 변경하는 방법에 대한 페이지를 참조하십시오.
진행하려면 배울 방법을 선택하거나 모든 섹션을 읽으십시오.
웹 페이지에서 글꼴과 글꼴을 한 번만 변경하려면 요소 태그에서 속성을 변경해야합니다. style 속성을 사용하여 아래 예제와 같이 font-family, color 및 font-size로 글꼴 크기를 지정하여 글꼴 및 색상을 지정할 수 있습니다.
예제 코드
이 텍스트에는 Courier, Blue 및 20px 글꼴이 있습니다.
결과
이 텍스트는 Courier 글꼴로 Blue, 20px 크기입니다.
하나 이상의 페이지에 CSS 사용
한 페이지의 사용자 정의 글꼴
웹 페이지의 머리 부분에 탭 사이에 코드를 삽입하여 다양한 요소의 텍스트 모양을 변경할 수 있습니다. 다음 파란색 상자에는 한 번 호출 된 글꼴 예제가 Courier로 변경되어 빨간색으로 표시되는 예제 코드가 들어 있습니다. 보시다시피, 클래스 이름을 "custom"로 정의했습니다.
.custom {font-family : Courier; 색깔 : 빨강; 글꼴 크기 : 20px; } 일단 정의되면, 이 스타일은 "custom"클래스를 붙임으로써 페이지의 대부분의 요소에 적용될 수 있습니다. 다음 상자는 두 줄의 코드와 각각의 결과를 보여줍니다.
예
이 모든 문장은 빨간색과 택배입니다.
TEST라는 단어 만 빨간색이고 Courier입니다.
결과
이 모든 문장은 빨간색과 Courier입니다.
TEST라는 단어 만 빨간색이고 Courier입니다.
많은 페이지의 사용자 정의 글꼴
외부 CSS 파일을 가져 오는 것은 사용자가 동시에 여러 페이지의 규칙을 변경할 수 있다는 점에서 매우 유용 할 수 있습니다. 다음 섹션에서는 글꼴을 변경하는 기본 CSS 파일을 만드는 예제와 대부분의 요소의 색상을 보여줍니다. 이 파일은 전체 사이트에서도 둘 이상의 웹 페이지에로드 될 수 있습니다.
기본 텍스트 편집기를 사용하여 다음 텍스트를 .css 파일로 저장하면 가져 오기를 준비합니다.
@charset "utf-8";.courier {font-family : Courier; 색상 : # 005CB9; }
앞의 텍스트가 .css 파일 (우리의 이름은 basic.css )에 배치되면 다음 예제와 비슷한 줄을 사용하여 다른 페이지의 파일에 연결할 수 있습니다.
팁 : 사용자는 가져온 .css 파일의 코드를 변경하여 페이지의 요소 특성을 변경할 수 있습니다.
글꼴 태그 솔루션
더 이상 사용되지 않지만 HTML 태그를 계속 사용할 수 있으며 일부 온라인 서비스에서 사용해야 할 수 있습니다. FONT 태그를 사용할 때는 사용할 글꼴을 설명하는 face 속성을 포함해야합니다. 아래 예제에서는 Courier 글꼴과 진한 파란색의 16 진수 색상 코드 # 005CB9를 사용합니다.
예제 코드
특수 글꼴 예제.