CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상 CSS 배경 CSS 테두리 CSS 여백 CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요 CSS 텍스트 CSS 글꼴 CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블 CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트 CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음 CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트 CSS 그림자 CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수 CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 웹 안전 글꼴


웹 안전 글꼴이란 무엇입니까?

웹 안전 글꼴은 모든 브라우저와 장치에 보편적으로 설치되는 글꼴입니다.


대체 글꼴

그러나 100% 완전히 웹에 안전한 글꼴은 없습니다. 글꼴을 찾을 수 없거나 제대로 설치되지 않았을 가능성은 항상 있습니다.

따라서 항상 대체 글꼴을 사용하는 것이 매우 중요합니다.

이는 font-family 속성에 유사한 "백업 글꼴" 목록을 추가해야 함을 의미합니다. 첫 번째 글꼴이 작동하지 않으면 브라우저는 다음 글꼴을 시도하고 다음 글꼴을 시도하는 식으로 계속됩니다. 항상 일반 글꼴 패밀리 이름으로 목록을 끝내십시오.

예시

여기에는 Tahoma, Verdana 및 sans-serif의 세 가지 글꼴 유형이 있습니다. 두 번째 및 세 번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 위한 백업입니다.

p {
font-family: Tahoma, Verdana, sans-serif;
}

HTML 및 CSS를 위한 최고의 웹 안전 글꼴

다음 목록은 HTML 및 CSS에 가장 적합한 웹 안전 글꼴입니다.

  • Arial(산세리프체)
  • 베르다나(산세리프체)
  • 헬베티카(산세리프체)
  • 타호마(산세리프체)
  • 트레뷰셋 MS(산세리프)
  • 타임즈 뉴 로만(세리프)
  • 조지아(세리프)
  • 가라몬드(세리프)
  • Courier New(모노스페이스)
  • 브러시 스크립트 MT(필체)

참고: 웹사이트를 게시하기 전에 항상 다른 브라우저와 장치에서 글꼴이 어떻게 나타나는지 확인하고 항상 대체 글꼴을 사용하십시오!



Arial(산세리프체)

Arial은 온라인 및 인쇄 매체 모두에서 가장 널리 사용되는 글꼴입니다. Arial은 Google 문서도구의 기본 글꼴이기도 합니다.

Arial은 가장 안전한 웹 글꼴 중 하나이며 모든 주요 운영 체제에서 사용할 수 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


베르다나(산세리프체)

Verdana는 매우 인기 있는 글꼴입니다. Verdana는 작은 글꼴 크기에서도 쉽게 읽을 수 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


헬베티카(산세리프체)

Helvetica 글꼴은 디자이너들에게 사랑받고 있습니다. 많은 유형의 비즈니스에 적합합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


타호마(산세리프체)

Tahoma 글꼴은 문자 사이의 간격이 적습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


트레뷰셋 MS(산세리프)

Trebuchet MS는 1996년에 Microsoft에서 설계했습니다. 이 글꼴을 주의해서 사용하십시오. 일부 모바일 운영 체제에서는 지원되지 않습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


타임즈 뉴 로만(세리프)

Times New Roman은 세계에서 가장 잘 알려진 글꼴 중 하나입니다. 그것은 전문적으로 보이며 많은 신문과 "뉴스" 웹사이트에서 사용됩니다. Windows 장치 및 응용 프로그램의 기본 글꼴이기도 합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


조지아(세리프)

조지아는 우아한 세리프 글꼴입니다. 다양한 글꼴 크기에서 매우 가독성이 높기 때문에 모바일 반응형 디자인에 적합한 후보입니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


가라몬드(세리프)

Garamond는 많은 인쇄된 책에 사용되는 고전적인 글꼴입니다. 그것은 시대를 초월한 모양과 좋은 가독성을 가지고 있습니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courier New(모노스페이스)

Courier New는 가장 널리 사용되는 고정 폭 세리프 글꼴입니다. Courier New는 디스플레이 코딩과 함께 자주 사용되며 많은 이메일 제공업체에서 기본 글꼴로 사용합니다. Courier New는 영화 시나리오의 표준 글꼴이기도 합니다.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


브러시 스크립트 MT(필체)

Brush Script MT 글꼴은 필기를 모방하도록 설계되었습니다. 우아하고 정교하지만 읽기 어려울 수 있습니다. 주의해서 사용하십시오.

예시

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

팁: 사용 가능한 모든 Google 글꼴 과 사용 방법도 확인하세요.