표준 글꼴은 무엇입니까? 모든 (현재) 버전의 Windows 및 해당 Mac 버전에 공통된 글꼴
글꼴은 웹사이트 디자인의 필수적이고 매우 중요한 부분으로, 웹사이트의 개성을 강조합니다. 이 기사에서는 표준 글꼴을 웹 페이지에 연결하는 방법에 대해 설명합니다(시스템 글꼴이라고도 함). 다음 기사에서는 Google Fonts에서 글꼴을 선택하고 WordPress 사이트에 연결하는 방법을 자세히 살펴보겠습니다.
시스템, 표준, 안전한 글꼴
모든 브라우저는 컴퓨터 운영 체제에 있는 글꼴만 표시합니다. 이것이 바로 시스템이라고 불리는 이유이며 기본적으로 운영 체제와 함께 설치됩니다.
그리고 대부분의 사이트 방문자의 브라우저에 표시될 가능성이 높기 때문에 안전한 글꼴이라고 합니다.
그러나 문제는 운영 체제마다 설치된 글꼴 세트가 다르다는 것입니다. Windows 및 Mac OS의 공식 페이지에서 운영 체제와 함께 제공되는 글꼴 세트를 볼 수 있습니다. 그리고 Unix/Linux에는 표준이 전혀 설정되어 있지 않습니다.
인터넷 페이지가 디자이너의 아이디어에 맞게 표시되도록 CSS에는 Font-Family라는 글꼴 속성을 설치했습니다.
글꼴 계열 속성
글꼴 패밀리 속성은 특정 특성별로 그룹화된 글꼴 패밀리입니다.
일반 제품군:
- serif - 끝에 세리프가 있는 글꼴입니다.
- 산세리프 - 산세리프 글꼴;
- 필기체 - 이탤릭체;
- 판타지 - 장식용 글꼴;
- 고정폭(monospace) - 고정폭 글꼴(같은 너비의 문자 사용)
이렇게 하면 서로 다른 운영 체제의 유사한 글꼴을 간단히 선택하여 쉼표로 구분된 인터넷 페이지에 연결할 수 있습니다.
시각적 인식을 위한 예는 다음과 같습니다. 나중에 글꼴 직접 연결을 고려할 때 이 예를 다시 살펴보겠습니다.
논리를 따르면 모든 것이 명확해질 것입니다.
본문(글꼴 계열: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
쓰여진 내용을 살펴 보겠습니다.
- OS 윈도우 - Arial;
- OC 맥 OS - 헬베티카 CY;
- OC 유닉스/리눅스 - Nimbus Sans L;
- 일반 계열 - 산세리프체.
소위 안전한 글꼴
OS Windows를 기반으로 여러 안전한 글꼴 목록이 컴파일되었습니다.
- Arial
- 아리알 블랙
- 코믹 산스 MS
- 택배 신규
- 그루지야
- 영향
- 타임즈 뉴 로만
- 트레뷰셋 MS
- 베르다나
이러한 글꼴은 모두 Mac OS X, Windows 및 웹 패키지용 핵심 글꼴이 설치된 많은 Unix/Linux 사용자에게 설치됩니다.
기타 사용자의 경우 대응표가 제공됩니다. 특정 계열에 속하는 유사한 글꼴이 포함되어 있습니다.
특정 계열에 대한 글꼴의 대응 및 소속 표:
| 윈도우 | 맥 OS | 유닉스/리눅스 | 조상 가족 |
|---|---|---|---|
| 아리알 블랙 | 헬베티카 C.Y. | 님부스 산스 L | 산세 리프 |
| Arial | 헬베티카 C.Y. | 님부스 산스 L | 산세 리프 |
| 코믹 산스 MS | 모나코 CY | * (아래 참조) | 필기체 |
| 택배 신규 | * (아래 참조) | 님부스 모노 L | 고정 폭 |
| 그루지야 | * (아래 참조) | 세기 교과서 L | 가는 장식 선 |
| 영향 | 차콜 C.Y. | * (아래 참조) | 산세 리프 |
| 타임즈 뉴 로만 | 타임즈 C.Y. | 님부스 로만 No9 L | 가는 장식 선 |
| 트레뷰셋 MS | 헬베티카 C.Y. | * (아래 참조) | 산세 리프 |
| 베르다나 | 제네바 C.Y. | 데자뷰 산스 | 산세 리프 |
* 글꼴을 연결할 때 안심하고 사용할 수 있습니다. 이 표는 키릴 문자와 러시아어 알파벳을 지원합니다.
이 기사에서는 테이블 자체를 가져 왔습니다.
사이트에 시스템 글꼴 연결
시스템 글꼴을 웹 사이트에 연결하는 방법에는 여러 가지가 있습니다. 또한 다양한 글꼴을 다양한 단락에 연결할 수 있습니다. 개별 단어와 구문에 다양한 글꼴을 적용합니다. 이제 나는 이 모든 것을 고려하려고 노력할 것입니다.
자, 모든 것을 순서대로 해보자.
CSS 파일에서 글꼴 연결
연결이 필요한 경우 전체 문서의 기본 글꼴, 스타일 시트에 다음 코드를 추가하기만 하면 됩니다.
Body (font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* 글꼴을 전체 문서에 연결 */ 글꼴 크기: 16px; /* 글꼴 크기 추가 설정 */ 글꼴 -weight: 400; /* 글꼴 두께를 설정하거나 400 대신 값을 보통으로 설정합니다 */ )
제목에 글꼴 할당 H1, H2, H3, H4, H5, H6(여기서도 동일합니다. 제목을 강조하기 위해 굵은 값을 설정했습니다):
H1,h2,h3,h4,h5,h6(font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* 글꼴을 제목에 연결 */font-weight: 600; / * 글꼴 두께를 설정하거나 600 대신 값을 굵게 설정 */ )
단락에만 글꼴을 할당합니다.
P( 글꼴 계열: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* 글꼴을 단락에 연결하고 li 목록, div 블록, 양식 및 기타 요소에 적용할 수 있습니다 */ 글꼴 가중치 : Normal; /* 글꼴 두께를 설정하거나 600 대신 값을 굵게 설정합니다. */font-size: 16px /* 단락의 글꼴 크기를 추가로 설정합니다. */ )
에게 특정 단락에만 글꼴 지정또는 블록인 경우 먼저 HTML 문서에서 이 블록에 클래스를 할당해야 합니다.
다음은 사용자 정의 글꼴이 있는 단락입니다.
CSS 테이블에 다음 코드를 작성합니다.
Font( Font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* 글꼴을 특정 단락에 연결하고 개별 li 목록, div 블록, 양식 및 기타 요소에 적용할 수 있습니다 */ Font- Weight: Normal; /* 글꼴 두께를 설정하거나 600 대신 값을 굵게 설정합니다. */ Font-size: 16px /* 단락의 글꼴 크기를 추가로 설정합니다. */ )
이제 각 태그(.font 클래스(원하는 대로 호출)가 있는 html 요소)에는 일반(400), 굵기 및 16픽셀 크기의 Arial 글꼴이 할당됩니다.
마찬가지로 li 목록, 표, 전체 div 블록, 개별 단어 또는 구문에 다양한 글꼴을 할당할 수 있습니다.
HTML 문서에서 글꼴 연결
글꼴은 CSS 파일과 동일한 방식으로 HTML 문서에 직접 포함되며 유일한 차이점은 구문입니다. 문서 헤더(태그 사이)에 글꼴을 포함할 수 있습니다.
(CSS 파일과 유사) 또는 인라인 - html 태그에 직접 속성을 할당합니다.헤더에 글꼴 포함, 태그 사이
. 이렇게 하려면 html 문서에 다음 코드를 추가하세요.
여기서는 반복하지 않겠습니다. 모든 것은 CSS 파일의 연결과 유사합니다.
글꼴 인라인 연결, 사이트 요소에 직접 연결됩니다. 몇 가지 예를 들어보겠습니다.
단락에 글꼴 연결하기
다음은 텍스트가 포함된 단락입니다.
별도의 단어를 굵게 강조 표시하고 기본 글꼴과 별도의 글꼴을 할당합니다.
여기에 텍스트가 포함된 단락이 있습니다. 단어, 굵은 글씨로 강조 표시되어야 함
링크는 여기
마찬가지로 모든 html 태그에 글꼴을 할당합니다.
그러나 CSS 파일을 통해 요소에 스타일을 할당하는 것이 여전히 가장 좋으며 권장됩니다. 첫째, CSS에서 스타일을 한 번만 작성한 다음 HTML에서 필요한 클래스만 할당하면 됩니다. 둘째, 인라인 스타일을 작성하면 중복된 콘텐츠가 생성됩니다. 이러한 속성과 클래스는 검색엔진에 의해 인덱싱되는 것 같은데, W3C에서는 인라인을 아예 폐지하고 싶다고 들었습니다. 때로는 이런 식으로 스타일을 작성하는 것이 더 쉽습니다.
모두. 사이트 업데이트에 따라 비표준 글꼴과 원본 글꼴이 모든 브라우저에서 올바르게 표시되도록 사이트에 연결하는 방법에 대한 기사를 준비 중입니다. 맞춤 글꼴을 선택할 수 있는 좋은 서비스도 소개해드릴게요.
레이아웃 생성을 시작할 때 페이지에 사용되는 글꼴을 CSS에 구체적으로 지정해야 합니다. 디자이너는 페이지의 주요 텍스트뿐만 아니라 다양한 제목, 로고, 모노그램도 다양한 글꼴로 입력하는 경우가 많습니다.
훌륭한 레이아웃 디자이너와 마찬가지로 훌륭한 디자이너는 브라우저가 페이지를 표시하기 위해 사용자 컴퓨터에 설치된 글꼴만 사용할 수 있다는 것을 알고 있습니다. 즉, 글꼴은 두 가지 범주로 나눌 수 있습니다.
- 대다수의 사용자가 문제 없이 표시할 글꼴입니다.
- 상당히 많은 사용자 그룹이 가지고 있지 않은 글꼴입니다.
예를 들어 디자이너가 두 번째 카테고리의 글꼴을 사용하여 로고나 큰 정적 제목을 만든 경우 주저하지 않고 텍스트를 이미지로 바꾸는 기술을 사용할 수 있습니다. 이 기술을 사용할 때의 단점은 유연성이 없다는 것입니다. 텍스트에 변경 사항이 있으면 이미지를 다시 실행하고 CSS를 변경해야 합니다(예: 새 이미지의 크기가 이전 이미지와 일치하지 않는 경우).
기술 사용의 위험은 텍스트 변경 가능성에 직접적으로 달려 있다고 말할 수 있습니다. 따라서 예를 들어 페이지의 일반 텍스트를 비표준 글꼴로 작성할 수 없습니다! 유능한 디자이너라면 절대 이런 일을 하지 않을 것이다. 디자이너가 녹색 글꼴을 발견하면 훌륭한 레이아웃 디자이너는 자신의 실수를 바로잡아야 합니다. 레이아웃에서 이 글꼴을 가장 유사한 표준 글꼴로 교체하세요.
그러나 첫 번째 그룹의 글꼴과 두 번째 그룹의 글꼴을 어떻게 구별할 수 있습니까? 컴퓨터에 직접 설치된 글꼴 세트에 의존할 수 없다는 것은 분명합니다! 그것을 알아 봅시다.
표준 글꼴
표준 글꼴은 운영 체제와 함께 설치되는 글꼴 세트입니다. 운영 체제가 다르기 때문에 글꼴 세트도 다릅니다. 예를 들어 다양한 Windows 버전의 표준 글꼴 목록은 표준 Windows 글꼴 문서에서 찾을 수 있으며, 표준 Mac OS 글꼴 목록은 Mac OS에 포함된 글꼴 페이지에서 찾을 수 있습니다. Unix/Linux 운영 체제의 경우 단일 글꼴 세트가 없습니다. 많은 Linux 사용자는 DejaVu 글꼴 세트를 사용하며, 특히 Ubuntu에서는 기본적으로 설치됩니다. http://www.codestyle.org의 통계에 따르면 많은 Unix/Linux 사용자도 URW, Free 및 기타 글꼴 세트를 설치하고 있습니다. 동일한 통계에 따르면 Unix/Linux 사용자의 60% 이상이 자신의 컴퓨터에 웹용 핵심 글꼴 세트를 보유하고 있으며, 이는 2002년까지 Microsoft 웹사이트에서 공식적으로 무료로 다운로드할 수 있었습니다.
모든 운영 체제에서 디자이너가 의도한 대로 페이지를 표시하려면 CSS 글꼴 모음 속성에 쉼표로 구분하여 나열되는 여러 글꼴을 지정할 수 있습니다.
이 속성은 글꼴 계열 이름 및/또는 일반 계열 이름의 우선순위 목록을 지정합니다. CSS2 사양에 따르면 두 가지 유형의 글꼴 모음 이름이 있습니다.
- 선택한 글꼴 모음 이름입니다. 예를 들어 "Times new Roman", "Arial"등이 있습니다. 공백이 포함된 글꼴 계열 이름은 따옴표로 묶어야 합니다. 따옴표가 누락된 경우 글꼴 이름 앞뒤의 공백 문자는 무시되고 글꼴 이름 내의 공백 시퀀스는 단일 공백으로 변환됩니다.
- 일반(공통) 패밀리. 사양은 다음과 같은 일반 제품군을 정의합니다.
- serif - 끝에 세리프가 있는 글꼴입니다.
- 산세리프 - 산세리프 글꼴;
- 필기체 - 이탤릭체;
- 판타지 - 장식용 글꼴;
- 고정폭(monospace) - 고정폭 글꼴(같은 너비의 문자 사용)
클랜 가문 이름은 키워드이므로 따옴표로 묶을 필요가 없습니다.
따라서 디자인을 위해 OS Windows의 표준 글꼴을 선택하고 Mac OS 및 Unix/Linux용 유사한 글꼴을 선택하고 공통 글꼴 모음을 지정하면 작업이 완료됩니다.
그러나 그렇게 간단하지는 않습니다. 좀 더 자세히 파헤쳐 보겠습니다.
웹에 안전한 글꼴 찾기
인터넷에서는 "안전한" 웹 글꼴이라는 개념이 역사적으로 발전해 왔습니다. 안전한 글꼴은 모든 운영 체제에 표준으로 사용되는 글꼴입니다. 우리는 그러한 상황만을 꿈꿀 수 있기 때문에 절대적으로 안전한 글꼴은 없습니다!
일부 글꼴은 예약을 통해 안전하다고 할 수 있습니다.
"안전한" 글꼴을 정의하는 기준은 다른 운영 체제에서도 사용되는 가장 일반적인 Windows 운영 체제의 글꼴이었습니다. 이러한 사용의 예로는 통계에 따르면 많은 Unix/Linux 사용자가 다운로드한 웹 글꼴 패키지용 핵심 글꼴이 이미 언급되어 있습니다.
이 패키지에는 Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings 글꼴이 포함되어 있습니다. 그들 모두는 Runet에 중요한 키릴 문자를 지원합니다.
Mac OS X(이 OS는 Mac OS 사용자들 사이에서 가장 널리 사용됨)에 표준으로 제공되는 글꼴 세트에는 웹용 핵심 글꼴 세트의 모든 글꼴이 포함되어 있습니다.
따라서 다른 운영 체제에서 사용되는 Windows 글꼴을 기반으로 소위 "안전한" 웹 글꼴 목록이 다음과 같이 구성되었습니다.
- Arial
- 아리알 블랙
- 코믹 산스 MS
- 택배 신규
- 그루지야
- 영향
- 타임즈 뉴 로만
- 트레뷰셋 MS
- 베르다나
Webdings 글꼴에는 아이콘이 포함되어 있어 콘텐츠에 사용할 수 없습니다. Andale Mono는 일상적인 화면 읽기에 적합하지 않고 모든 Windows 사용자가 사용하는 것은 아니기 때문에 널리 사용되지 않습니다.
모든 Windows, Mac OS X 사용자 및 대다수의 Unix/Linux 사용자(즉, 웹 패키지용 핵심 글꼴을 설치한 사용자)는 이러한 글꼴을 모두 가지고 있습니다.
하지만 나머지는 어떻습니까? 결국 디자이너의 계획이 가능한 한 많은 사용자에게 보여지기를 원할 것입니다!
키릴 문자를 지원하는 글꼴
RuNet의 특정 기능은 페이지 인코딩 문제와 글꼴의 키릴 문자 지원입니다. 다양한 문자 인코딩 문제를 피하기 위해 똑똑한 사람들은 여러 언어의 문자를 하나의 글꼴로 결합할 수 있는 유니코드를 생각해 냈습니다. 따라서 러시아어 페이지의 경우 키릴 문자를 지원하는 유니코드 글꼴만 사용해야 합니다.
아래는 글꼴 대응 표입니다.
| 윈도우 | 맥 OS | 유닉스/리눅스 | 조상 가족 |
|---|---|---|---|
| 아리알 블랙 | 헬베티카 C.Y. | 님부스 산스 L | 산세 리프 |
| Arial | 헬베티카 C.Y. | 님부스 산스 L | 산세 리프 |
| 코믹 산스 MS | 모나코 CY | * (아래 참조) | 필기체 |
| 택배 신규 | * (아래 참조) | 님부스 모노 L | 고정 폭 |
| 그루지야 | * (아래 참조) | 세기 교과서 L | 가는 장식 선 |
| 영향 | 차콜 C.Y. | * (아래 참조) | 산세 리프 |
| 타임즈 뉴 로만 | 타임즈 C.Y. | 님부스 로만 No9 L | 가는 장식 선 |
| 트레뷰셋 MS | 헬베티카 C.Y. | * (아래 참조) | 산세 리프 |
| 베르다나 | 제네바 C.Y. | 데자뷰 산스 | 산세 리프 |
* 글꼴 반대편 열에 있는 *는 운영 체제에 Windows 글꼴에 해당하는 기본 키릴 문자가 없음을 의미합니다. 그러나 동시에 이 글꼴 자체가 운영 체제에 직접 설치될 가능성이 높습니다.
예를 들어 레이아웃의 기본 텍스트가 Arial인 경우 테이블에서 이 글꼴을 찾아 CSS에 해당 줄을 작성합니다.
본문( 글꼴 계열: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
몸( 글꼴 - 계열: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
이 항목은 사용자가 Arial 글꼴을 갖고 있는 경우(모든 Windows 사용자 및 모든 Mac OS X 사용자가 이를 갖고 있는 경우) 페이지가 이 글꼴로 표시된다는 의미입니다. 사용자에게 이 글꼴이 없으면 러시아어를 사용하는 Mac OS 9 사용자의 페이지는 표준 시스템 글꼴인 Helvetica CY로 정확하게 표시되고 Unix/Linux 사용자의 경우 Nimbus Sans L 글꼴로 표시됩니다. 는 Unix/Linux 사용자의 90%에게 설치됩니다. Unix/Linux 사용자가 이 글꼴을 가지고 있지 않은 10%에 속하면 페이지는 웹 페이지 보기에 기본적으로 설정된 serif 글꼴로 표시됩니다.
표가 Unix/Linux 글꼴을 고려한다는 사실 외에도 일반적인 Helvetica 뒤에는 이상한 CY 아이콘도 있습니다. 그것이 무엇인지 알아봅시다!
Mac OS X 출시 이전에 이 줄은 다음과 같은 의미를 가졌습니다. Windows 사용자의 경우 페이지를 Arial로 표시하고, Mac OS 9 사용자의 경우 표준 Helvetica 글꼴로 표시하며, 나머지 사용자의 경우 시스템에서 페이지를 표시합니다. 브라우저에서 기본적으로 구성되는 sans-serif 글꼴입니다. 그러나 다시 한 번 중요한 뉘앙스입니다! 표준 Mac OS 9 Helvetica 글꼴에는 키릴 문자가 없습니다! 러시아어 페이지의 경우 이는 다음을 의미합니다. Windows 사용자의 경우 Arial 페이지를 표시하고 Mac OS 9 사용자의 경우 읽을 수 없는 정보를 표시하는 표준 Helvetica 글꼴로 표시하며 나머지는 sans-serif 시스템이 있는 페이지를 참조합니다. 브라우저에서 기본적으로 구성된 글꼴입니다.
Mac OS 9 사용자에게 이 세트를 올바르게 표시하려면 키릴화되지 않은 Helvetica 대신 키릴 문자가 포함된 동일한 표준 Mac OS 9 글꼴 Helvetica CY를 지정하는 것이 좋습니다.
Mac OS X 출시 이후 눈금자 읽기 방식이 변경되었습니다. 이제 Windows/Mac OS X에 대해 하나의 공통 표준 글꼴이 지정되었습니다. 그리고 Mac OS 9 사용자가 디자이너의 의도를 볼 수 있도록 하려면 글꼴 라인에 키릴 문자가 포함된 글꼴을 포함해야 합니다.
따라서 안전한 글꼴은 없지만 안전한 글꼴 모음이 있습니다. 그들은 또한 불린다 글꼴 CSS 스택. 표준 Windows/Mac OS X 글꼴 외에도 이러한 줄에는 Mac OS 9 표준 세트(기본적으로 "안전한" 글꼴이 포함되지 않음) 및 일반 Unix/Linux 글꼴의 해당 글꼴이 포함될 수도 있습니다.
레이아웃 디자이너는 조만간 디자이너가 "안전한" 글꼴 목록에 포함되지 않은 레이아웃의 글꼴을 사용하는 순간을 접하게 됩니다. 그러나 이것은 아직 경보를 울리는 이유가 아닙니다! 예를 들어 디자이너는 레이아웃에 이 목록에 포함되지 않은 Tahoma 글꼴을 자주 사용합니다. 적절하게 구성된 글꼴 라인은 Tahoma뿐만 아니라 다른 글꼴도 사용할 가능성을 열어줍니다. 점점 더 많은 디자이너가 이 기회를 활용하고 있으며 유능한 레이아웃 디자이너는 이에 대해 알아야 합니다.
다음은 "안전한" 글꼴 목록에 포함되지 않지만 레이아웃에 사용할 수 있는 추가 글꼴 표입니다.
| 윈도우 | 맥 OS | 조상 가족 |
|---|---|---|
| 루시다 콘솔 | 모나코 | 고정 폭 |
| 루시다 산스 유니코드 | 루시다 그란데 | 산세 리프 |
| 타호마 | 제네바 C.Y. | 산세 리프 |
키릴 문자가 없으면 어떻게 되나요?
영어 텍스트의 경우 위 표의 모양이 약간 다릅니다.
| 윈도우 | 맥 OS | 유닉스/리눅스 | 조상 가족 |
|---|---|---|---|
| 아리알 블랙 | 간단한 기계 장치 | 님부스 산스 L | 산세 리프 |
| Arial | 헬베티카 | 님부스 산스 L | 산세 리프 |
| 코믹 산스 MS | 모나코 | TSCu_Comic | 필기체 |
| 택배 신규 | 택배원 | 님부스 모노 L | 고정 폭 |
| 그루지야 | * (아래 참조) | 세기 교과서 L | 가는 장식 선 |
| 영향 | 숯 | 레카 | 산세 리프 |
| 타임즈 뉴 로만 | 타임스 | 님부스 로만 No9 L | 가는 장식 선 |
| 트레뷰셋 MS | 헬베티카 | 가루다 | 산세 리프 |
| 베르다나 | 제네바 | 데자뷰 산스 | 산세 리프 |
Arial, Courier New 및 Times New Roman 글꼴의 경우 눈금자를 만들 때 Unix/Linux 글꼴을 먼저 지정한 다음 Mac OS 글꼴을 지정하는 것이 좋습니다. 이는 Linux X11 핵심 글꼴 세트가 일부 비뚤어져 있기 때문입니다.
"안전한" 목록에는 포함되지 않지만 레이아웃에 사용할 수 있는 글꼴은 이 표를 기반으로 하는 CSS 글꼴 스택에 의해 더 잘 정의됩니다.
| 윈도우 | 맥 OS | 유닉스/리눅스 | 조상 가족 |
|---|---|---|---|
| 루시다 콘솔 | 모나코 | - | 고정 폭 |
| 루시다 산스 유니코드 | 루시다 그란데 | 가루다 | 산세 리프 |
| 팔라티노 리노타입 | 팔라티노 | 가루다** | 산세 리프 |
| 타호마 | 제네바 | 칼리마티 | 산세 리프 |
Unix/Linux 열의 대시는 해당 운영 체제의 사용자가 페이지에서 기본 글꼴을 볼 가능성이 가장 높다는 것을 나타냅니다.
** 이 줄에서는 Palatino 앞에 Garuda 글꼴을 배치하는 것이 합리적입니다(위 설명 참조).
결론:
- 절대적으로 안전한 글꼴은 없습니다. 다음 글꼴은 조건부로 안전한 것으로 간주될 수 있습니다.
- Arial
- 아리알 블랙
- 코믹 산스 MS
- 택배 신규
- 그루지야
- 영향
- 타임즈 뉴 로만
- 트레뷰셋 MS
- 베르다나
- 글꼴의 키릴 문자 지원을 고려한 안전한 CSS 스택은 기사에서 찾을 수 있습니다.
- 페이지에서 키릴 문자 지원이 중요하지 않은 경우 기사의 CSS 스택을 사용합니다.
웹 디자인이 처음이라면 다음과 같이 생각할 수도 있습니다. “왜 이렇게 작은 글꼴 세트로 제한해야 합니까? 나는 아름다운 글꼴을 엄청나게 많이 보유하고 있습니다!” 사실 방문자의 브라우저는 설치된 글꼴만 표시할 수 있습니다. 그의운영 체제( 대략. 역자:현재 페이지와 새로운 속성을 디자인할 때 거의 모든 글꼴을 사용할 수 있습니다. @글꼴-얼굴; 그러나 아직 모든 브라우저가 이 기능을 지원하는 것은 아닙니다.) 모든귀하의 페이지 방문자는 귀하가 선택한 글꼴의 소유자여야 합니다. 따라서 각 운영 체제에서 사용 가능한 글꼴만 사용해야 합니다. 다행히 CSS에는 속성이 있습니다. @글꼴-가족, 이 작업을 더 쉽게 만듭니다.
목록
| @font-family 의미 | 윈도우 | 맥 | 가족 |
|---|---|---|---|
| Arial, Helvetica, 산세리프체 | Arial | Arial, 헬베티카 | 산세 리프 |
| "Arial Black", 가제트, 산세리프체 | 아리알 블랙 | Arial Black, 가제트 | 산세 리프 |
| "Comic Sans MS", 필기체 | 코믹 산스 MS | 코믹 산스 MS 5 | 필기체 |
| "Courier New", Courier, 고정 폭 | 택배 신규 | 택배 신품, 택배 6 | 고정 폭 |
| 조지아, 세리프 | 조지아 1 | 그루지야 | 가는 장식 선 |
| 임팩트, 차콜, 산세리프 | 영향 | 임팩트 5, 차콜 6 | 산세 리프 |
| "루치다 콘솔", 모나코, 고정 폭 | 루시다 콘솔 | 모나코 5 | 고정 폭 |
| "Lucida Sans Unicode", "Lucida Grande", 산세리프체 | 루시다 산스 유니코드 | 루시다 그란데 | 산세 리프 |
| "Palatino Linotype", "Book Antiqua", Palatino, 세리프 | Palatino Linotype, 도서 Antiqua 3 | 팔라티노 6 | 가는 장식 선 |
| 타호마, 제네바, 산세리프체 | 타호마 | 제네바 | 산세 리프 |
| "타임즈 뉴 로만", 타임즈, 세리프 | 타임즈 뉴 로만 | 타임스 | 가는 장식 선 |
| "Trebuchet MS", Helvetica, 산세리프체 | 트레뷰셋 MS 1 | 헬베티카 | 산세 리프 |
| 베르다나, 제네바, 산세리프체 | 베르다나 | 제네바, 베르다나 | 산세 리프 |
| 상징 | 기호 2 | 기호 2 | - |
| 웹딩 | 웹딩 2 | 웹딩 2 | - |
| 윙딩스, "Zapf Dingbats" | 윙딩스 2 | 자프 딩뱃 2 | - |
| "MS Sans Serif", 제네바, 산세리프체 | MS 산세리프 4 | 제네바 | 산세 리프 |
| "MS Serif", "New York", 세리프 | MS 세리프 4 | 뉴욕 6 | 가는 장식 선 |
1 Georgia 및 Trebuchet MS 글꼴은 Windows 2000/XP와 함께 제공되고 IE 글꼴 패키지에 포함되어(실제로 많은 Microsoft 응용 프로그램과 함께 제공됨) 많은 Windows 98 컴퓨터에 설치됩니다.
2 기호 글꼴은 Internet Explorer에만 표시됩니다. 다른 브라우저에서는 일반적으로 표준 글꼴로 대체됩니다(예를 들어 기호 글꼴은 Opera에 표시되고 Webdings는 Safari에 표시됨).
3 Book Antiqua 글꼴은 Palatino Linotype과 거의 동일합니다. Palatino Linotype은 Windows 2000/XP와 함께 제공되며 Book Antiqua는 Windows 98과 함께 제공됩니다.
4 이 글꼴은 TrueType이 아니라 비트맵이므로 일부 크기에서는 보기에 좋지 않을 수 있습니다(96 DPI에서 8, 10, 12, 14, 18 및 24pt로 표시되도록 설계되었습니다).
5 이러한 글꼴은 표준 스타일의 Safari에서만 작동하며 볼드체나 이탤릭체는 작동하지 않습니다. Comic Sans MS도 볼드체로 작동하지만 이탤릭체로는 작동하지 않습니다. 다른 Mac 브라우저는 누락된 글꼴 속성을 자체적으로 잘 에뮬레이트하는 것 같습니다(팁을 제공한 Christian Fecteau에게 감사드립니다).
6 이 글꼴은 클래식 설치를 통해서만 Mac에 설치됩니다.
스크린샷
- Mac OS X 10.4.8, Firefox 2.0, ClearType 활성화(스크린샷을 제공한 Juris Vecvanags에게 감사드립니다)
- Mac OS X 10.4.4, Firefox 1.5, ClearType 활성화
- Mac OS X 10.4.11, Safari 3.0.4, ClearType 활성화(스크린샷을 제공해주신 Nolan Gladius에게 감사드립니다)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType 활성화(스크린샷을 제공한 Eric Zavesky에게 감사드립니다)
- Windows Vista, Internet Explorer 7, ClearType 지원
- Windows Vista, Firefox 2.0, ClearType 활성화(스크린샷을 제공해주신 Michiel Bijl에게 감사드립니다)
웹 디자인의 주요 작업 중 하나는 올바른 것을 선택하는 것입니다. 표준 글꼴. Google Web Fonts 또는 Typekit과 같은 글꼴 삽입 서비스는 새로운 것을 제공하려는 목표로 대안으로 만들어졌습니다.
사용하기가 매우 쉽습니다. Google Web Fonts를 예로 들어보겠습니다.
Open Sans, Droid Serif 또는 Lato 글꼴을 선택하세요. 코드를 작성하고 요소에 붙여넣으세요. HTML 문서. CSS에서 참조할 준비가 되었습니다! 전체 과정은 60초도 채 걸리지 않았습니다. 그리고 모든 것이 완전 무료입니다.
무엇이 잘못되었을 수 있나요?
일부 글꼴은 모든 사람이 사용할 수 없을 수도 있습니다. 그리고 이는 문제가 있을 수 있음을 의미합니다. 사이트에 아름다운 글꼴을 선택했다는 사실에 만족하지만 웹 페이지 방문자는 대신 보기 흉한 글씨를 보게 됩니다.
백업 옵션을 구현하면 이런 일이 발생하지 않습니다.
안전한 웹 글꼴을 사용하는 것이 얼마나 중요합니까?
각 장치에는 사전 설치된 자체 글꼴 세트가 있습니다. 어느 것이 운영 체제에 따라 다릅니다. 문제는 그들 사이에 약간의 차이가 있다는 것입니다.
웹사이트는 어떻습니까? 이 같은? 표시되는 글꼴은 해당 사이트에 원래 지정된 글꼴이 아닐 수도 있습니다.
무슨 뜻이에요? 디자이너가 사이트에 사용할 유료 글꼴 모음을 선택했다고 가정해 보겠습니다. 해당 글꼴이 설치되어 있지 않고 특수 웹 서비스에서 제공되지 않는 경우 표시되는 글꼴은 표준 옵션 중 하나입니다. 예를 들어 타임즈 뉴 로만.
따라서 화면의 텍스트가 끔찍해 보일 수 있습니다.
그리고 여기 사이트의 표준 글꼴모든 운영 체제에서 사용할 수 있습니다. 이것은 Windows, Mac, Google, Unix 및 Linux에서 사용할 수 있는 소규모 컬렉션입니다.
이 선택을 통해 디자이너와 웹 사이트 소유자는 백업 글꼴로 사용할 글꼴을 지정할 수 있습니다. 이를 통해 페이지가 다양한 장치에서 어떻게 표시되는지 제어할 수 있습니다.
대체 옵션으로 개발자는 원본 글꼴과 매우 유사한 글꼴을 선택하고 이 글꼴이 사용자에게 표시됩니다.
가장 인기 있는 작품을 살펴보겠습니다. 표준 글꼴 HTML.
15가지 최고의 웹 안전 글꼴
Arial
대부분의 경우 표준으로 간주됩니다. 가장 일반적인 글꼴 " 산세 리프"또는 산세리프 글꼴( 글자 끝에 세리프가 없는 것). Windows에서 다른 문자를 대체하기 위해 자주 사용됩니다.
헬베티카
Helvetica는 디자이너에게 생명의 은인입니다. 이것 표준 웹 글꼴거의 항상 작동합니다( 적어도 다른 글꼴에 대한 안전망으로).
타임즈 뉴 로만
Arial이 산세리프 글꼴에 대해 수행하는 것과 동일한 역할을 세리프 글꼴에 제공합니다. 그것은 가장 인기있는 것 중 하나입니다. Windows 장치. 이것은 이전 Times 글꼴의 업데이트 버전입니다.
타임스
CSS 표준 글꼴 The Times는 대부분의 사람들에게 친숙합니다. 많은 사람들이 오래된 신문의 좁은 칼럼에 작은 글자로 그를 기억합니다. 전통이 된 가장 일반적인 인쇄 유형입니다.
택배 신규
Times New Roman과 유사하며 오래된 고전의 변형으로 사용됩니다. 또한 고정 폭 글꼴로 간주됩니다. 세리프 및 산세리프 글꼴과 달리 모든 문자의 너비는 동일합니다.
택배원
거의 모든 장치 및 운영 체제에서 대체로 사용되는 오래된 고정 너비 글꼴입니다.
베르다나
Verdana는 당연히 진정한 웹 글꼴로 간주될 수 있습니다( 진정한 웹 글꼴) 세리프 역할을 하는 단순한 선과 큰 크기 덕분입니다. 글자가 약간 길어서 화면에서 쉽게 읽을 수 있습니다.
그루지야
표준 웹 글꼴 Georgia는 모양과 크기가 Verdana 글꼴과 유사합니다. 같은 크기의 다른 글꼴보다 문자가 더 큽니다. 하지만 다른 제품과 함께 사용하지 않는 것이 좋습니다. 동일한 Times New Roman은 비교하면 난쟁이처럼 보입니다.
팔라티노
Palatino의 역사는 르네상스 시대로 거슬러 올라갑니다. 농담하지 마세요. 이것은 웹에 딱 맞는 또 다른 큰 글꼴입니다. 헤드라인이나 광고에 흔히 사용됩니다.
가라몬드
16세기 파리의 또 다른 고대 글꼴입니다. 새롭고 향상된 버전은 대부분의 Windows 장치에서 표준으로 제공됩니다. 나중에 이 글꼴은 다른 운영 체제에서 채택되었습니다.
서적상
북맨( 또는 북맨 올드 스타일) - 다음 중 하나 최고의 표준 글꼴제목용. 작은 사이즈를 사용해도 가독성이 좋은 것이 특징입니다.
코믹 산스 MS
Comic Sans MS는 세리프 글꼴의 재미있는 대안입니다.
트레뷰셋 MS
90년대 중반 Microsoft에서 처음 개발한 중세 테마 글꼴입니다. Windows XP에서 사용되었습니다. 오늘날에는 본문을 구성하는 데 사용됩니다.
아리알 블랙
비슷한 물건 사이트의 표준 글꼴 Arial. 사실, 더 크고 두껍고 더 튼튼합니다. 그 비율은 Helvetica 글꼴과 유사합니다. 그리고 그것이 중요합니까? 그들은 할 수있다 라이센스를 구매하지 않고도 Helvetica를 성공적으로 교체할 수 있습니다.
영향
제목을 강조하기 위한 또 다른 훌륭한 글꼴입니다. 여러 단어로 구성된 짧은 구문뿐만 아니라 긴 문장에서도 잘 작동합니다.
레이아웃 생성을 시작할 때 페이지에 사용되는 글꼴을 CSS에 구체적으로 지정해야 합니다. 디자이너는 페이지의 기본 텍스트뿐만 아니라 다양한 제목, 로고 및 모노그램도 다양한 글꼴로 입력하는 경우가 많습니다.
훌륭한 레이아웃 디자이너와 마찬가지로 훌륭한 디자이너는 브라우저가 페이지를 표시하기 위해 사용자 컴퓨터에 설치된 글꼴만 사용할 수 있다는 것을 알고 있습니다. 즉, 글꼴은 두 가지 범주로 나눌 수 있습니다.
- 대다수의 사용자가 문제 없이 표시할 글꼴입니다.
- 상당히 많은 사용자 그룹이 가지고 있지 않은 글꼴입니다.
예를 들어 디자이너가 두 번째 범주의 글꼴을 사용하여 로고나 큰 정적 제목을 만든 경우 주저하지 않고 이 기술을 사용할 수 있습니다. 이 기술을 사용할 때의 단점은 유연성이 없다는 것입니다. 텍스트에 변경 사항이 있으면 이미지를 다시 실행하고 CSS를 변경해야 합니다(예: 새 이미지의 크기가 이전 이미지와 일치하지 않는 경우).
기술 사용의 위험은 텍스트 변경 가능성에 직접적으로 달려 있다고 말할 수 있습니다. 따라서 예를 들어 페이지의 일반 텍스트를 비표준 글꼴로 작성할 수 없습니다! 유능한 디자이너라면 절대 이런 일을 하지 않을 것이다. 디자이너가 녹색 글꼴을 발견하면 훌륭한 레이아웃 디자이너는 자신의 실수를 바로잡아야 합니다. 레이아웃에서 이 글꼴을 가장 유사한 표준 글꼴로 교체하세요.
그러나 첫 번째 그룹의 글꼴과 두 번째 그룹의 글꼴을 어떻게 구별할 수 있습니까? 컴퓨터에 직접 설치된 글꼴 세트에 의존할 수 없다는 것은 분명합니다! 그것을 알아 봅시다.
표준 글꼴
표준 글꼴은 운영 체제와 함께 설치되는 글꼴 세트입니다. 운영 체제가 다르기 때문에 글꼴 세트도 다릅니다. 예를 들어 다양한 Windows 버전의 표준 글꼴 목록은 표준 Windows 글꼴 문서에서 찾을 수 있으며, 표준 Mac OS 글꼴 목록은 Mac OS에 포함된 글꼴 페이지에서 찾을 수 있습니다. Unix/Linux 운영 체제의 경우 단일 글꼴 세트가 없습니다. 많은 Linux 사용자는 DejaVu 글꼴 세트를 사용하며, 특히 Ubuntu에서는 기본적으로 설치됩니다. http://www.codestyle.org의 통계에 따르면 많은 Unix/Linux 사용자도 URW, Free 및 기타 글꼴 세트를 설치하고 있습니다. 동일한 통계에 따르면 Unix/Linux 사용자의 60% 이상이 자신의 컴퓨터에 웹용 핵심 글꼴 세트를 보유하고 있으며, 이는 2002년까지 Microsoft 웹사이트에서 공식적으로 무료로 다운로드할 수 있었습니다.
페이지가 디자이너가 의도한 대로 표시되도록 하려면 모든 운영 체제에서 CSS 속성에 쉼표로 구분하여 여러 글꼴을 지정할 수 있습니다.
이 속성은 글꼴 계열 이름 및/또는 일반 계열 이름의 우선순위 목록을 지정합니다. CSS2 사양에 따르면 두 가지 유형의 글꼴 모음 이름이 있습니다.
- 선택한 글꼴 모음 이름입니다. 예를 들어 "Times new Roman", "Arial" 등이 있습니다. 공백이 포함된 글꼴 계열 이름은 따옴표로 묶어야 합니다. 따옴표가 누락된 경우 글꼴 이름 앞뒤의 공백 문자는 무시되고 글꼴 이름 내의 공백 시퀀스는 단일 공백으로 변환됩니다.
- 일반(공통) 패밀리. 사양은 다음과 같은 일반 제품군을 정의합니다.
- serif - 끝에 세리프가 있는 글꼴입니다.
- 산세리프 - 산세리프 글꼴;
- 필기체 — 이탤릭체 글꼴;
- 판타지 - 장식용 글꼴;
- 고정폭(monospace) - 고정폭 글꼴(같은 너비의 문자 사용)
따라서 디자인을 위해 OS Windows의 표준 글꼴을 선택하고 Mac OS 및 Unix/Linux용 유사한 글꼴을 선택하고 공통 글꼴 모음을 지정하면 작업이 완료됩니다.
그러나 그렇게 간단하지는 않습니다. 좀 더 자세히 파헤쳐 보겠습니다.
웹에 안전한 글꼴 찾기
인터넷에서는 "안전한" 웹 글꼴이라는 개념이 역사적으로 발전해 왔습니다. 안전한 글꼴은 모든 운영 체제에 표준으로 사용되는 글꼴입니다. 그런 상황은 꿈꿀 수 밖에 없기 때문에 절대적으로 안전한 글꼴은 없습니다!
일부 글꼴은 예약을 통해 안전하다고 할 수 있습니다.
"안전한" 글꼴을 정의하는 기준은 다른 운영 체제에서도 사용되는 가장 일반적인 Windows 운영 체제의 글꼴이었습니다. 이러한 사용의 예로는 통계에 따르면 많은 Unix/Linux 사용자가 다운로드한 웹 글꼴 패키지용 핵심 글꼴이 이미 언급되어 있습니다.
이 패키지에는 Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings 글꼴이 포함되어 있습니다. 그들 모두는 Runet에 중요한 키릴 문자를 지원합니다.
Mac OS X(이 OS는 Mac OS 사용자들 사이에서 가장 널리 사용됨)에 표준으로 제공되는 글꼴 세트에는 웹용 핵심 글꼴 세트의 모든 글꼴이 포함되어 있습니다.
따라서 다른 운영 체제에서 사용되는 Windows 글꼴을 기반으로 소위 "안전한" 웹 글꼴 목록이 다음과 같이 구성되었습니다.
- Arial
- 아리알 블랙
- 코믹 산스 MS
- 택배 신규
- 그루지야
- 영향
- 타임즈 뉴 로만
- 트레뷰셋 MS
- 베르다나
Webdings 글꼴에는 아이콘이 포함되어 있어 콘텐츠에 사용할 수 없습니다. Andale Mono는 일상적인 화면 읽기에 적합하지 않고 모든 Windows 사용자가 사용하는 것은 아니기 때문에 널리 사용되지 않습니다.
모든 Windows, Mac OS X 사용자 및 대다수의 Unix/Linux 사용자(즉, 웹 패키지용 핵심 글꼴을 설치한 사용자)는 이러한 글꼴을 모두 가지고 있습니다.
하지만 나머지는 어떻습니까? 결국 디자이너의 계획이 가능한 한 많은 사용자에게 보여지기를 원할 것입니다!
출판물의 두 번째 부분에서 이에 대해 읽어보십시오.