폰트페이스는 인터넷의 웹 페이지에 글꼴을 표시할 수 있는 CSS 규칙입니다. 이 규칙이 있기 전에는 웹마스터가 자신의 사이트에서 가장 일반적이고 사용자 컴퓨터에 설치된 제한된 글꼴 세트를 사용할 수 있었습니다. 폰트페이스의 등장으로 특정 글꼴을 웹사이트에 쉽게 첨부할 수 있게 되었습니다.
당사 사이트에서 글꼴을 다운로드 한 경우 글꼴이있는 아카이브에서 프로젝트에 첨부 된 CSS 문서에 복사하여 넣어야하는 준비된 CSS 코드를 찾을 수 있습니다.
단계별 설치
1. 원하는 글꼴을 선택하고 "웹 사이트 용 다운로드"를 클릭합니다.
2. 사이트 루트에서 폴더 글꼴을 만들고 다운로드 한 글꼴을 복사합니다.
CSS 문서를 열고 아카이브에 있는 텍스트 파일의 내용을 복사합니다.
4. 글꼴 폴더의 경로가 올바른지 확인하세요. 글꼴이있는 폴더의 위치에 따라 경로에 하나 이상의 점이 포함될 수 있습니다.
5. 완료. 패밀리 이름이있는 속성을 복사하여 스타일을 작성하는 선택기에 붙여 넣습니다.
이미 다른 곳에서 글꼴을 다운로드했는데 연결하고 싶으면 어떻게 하나요?
이 경우 인터넷에서 글꼴 변환기를 찾아서 ttf 글꼴(또는 otf)을 올바른 형식, 즉 eot, svg, woff 및 woff2로 변환해야 합니다. 이는 글꼴이 모바일 디바이스뿐만 아니라 모든 브라우저에서 올바르게 표시되고 작동하도록 하기 위한 것입니다.
그런 다음 구문을 준수하여 @폰트페이스 규칙의 철자를 직접 입력해야 합니다.
Font-face의 구문
규칙의 구문은 크게 기본 속성과 고급 속성으로 나눌 수 있습니다.
기본:
- font-family - 글꼴의 이름을 지정합니다.
- src - 는 글꼴의 경로를 나타냅니다. 웹 사이트 서버에 있는 글꼴의 URL, 다른 사람의 서버에 있는 글꼴의 URL(예: Google 글꼴) 또는 단순히 사용자 컴퓨터에 있는 글꼴의 이름(Helvetica New Bold, Tahoma, Georgia 등) 일 수 있습니다.
확장:
- font-display - 다운로드 및 사용 준비 여부에 따라 글꼴이 표시되는 방식을 결정합니다.
- font-stretch - 을 사용하면 텍스트의 너비를 조정할 수 있습니다.
- font-style - 글꼴이 일반, 기울임 꼴 또는 기울어 졌는지 여부를 결정합니다 (후자의 두 글꼴은 동일하지 않음).
- font-weight - 글꼴의 채도를 100~900(100-작은, 900-작은)의 범위로 설정합니다.
- font-variant - 소문자를 수정하지 않고 그대로 두거나 모두 소문자(대문자)로 만드는 등 소문자를 표시하는 방법을 결정합니다.
- font-feature-settings - 를 사용하면 OpenType 글꼴의 고급 타이포그래피 기능을 관리할 수 있습니다.
- font-variations-settings - 를 사용하면 4글자 축 이름을 지정하여 오픈 타입 및 트루타입 글꼴의 변형을 낮은 수준에서 제어할 수 있습니다.
- unicode-range - 글꼴에 사용할 유니코드 코드(글리프)의 범위를 지정합니다.
Google 글꼴로 사이트에 글꼴 연결하기
Google 글꼴을 사용하는 것이 웹사이트에 글꼴을 연결하는 가장 쉬운 방법입니다. 해당 웹 사이트로 이동하여 원하는 글꼴을 찾고 설치할 올바른 글꼴을 선택한 다음 코드를 복사하세요.
복사한 코드는 HTML 페이지의 헤드 태그 본문에 배치해야 합니다.
이 방법의 단점은 사이트를 구성하는 동안 인터넷을 잃어버린 경우 파일이 로컬 컴퓨터와 Google 서버에 있지 않기 때문에 글꼴이 표시되지 않고 표준 글꼴로 대체되지 않는다는 것입니다. 또한 레이아웃 프레젠테이션을 위해 (또는 구성을 위해) 클라이언트를 방문했을 때 Wi-Fi가없는 경우 문제가 다시 발생할 가능성이 있습니다.
