Google Fonts 및 Font-Display를 사용하는 방법-CSS 튜토리얼-php.cn

코어 포인트 Google Fonts는 웹 프로젝트에 사용될 수있는 수많은 웹 글꼴을 제공하는 무료 오픈 소스 플랫폼입니다.

속성은 Google Fonts를 사용하는 데 핵심입니다. Google Fonts는로드하는 동안 글꼴의 렌더링 동작을 제어하고 느린 글꼴 로딩의 영향을 줄임으로써 사용자 경험을 최적화합니다. 프로젝트에 Google 글꼴을 추가하는 두 가지 주요 방법 인 링크 및 가져 오기. 두 방법 모두 Google Fonts 웹 사이트에서 원하는 글꼴을 선택하고 제공된 코드를 HTML 또는 CSS 파일에 추가하는 것이 포함됩니다. 속성에는 5 가지 가능한 값 (자동, 블록, 스왑, 폴백, 선택 사항)이있어로드하는 동안 글꼴이 렌더링되는 방법을 결정하여 사용자 정의 사용자 경험이 가능합니다. 이 자습서는 Google 글꼴 및 속성을 사용하는 방법을 살펴 봅니다. font-display Google Fonts는 대규모 웹 글꼴 라이브러리를 제공하는 무료 오픈 소스 플랫폼입니다. 웹 개발자로서 이러한 글꼴을 프로젝트에 통합하는 것은 다양한 장치에서 시각적으로 매력적이고 일관되게 설계된 웹 페이지를 만드는 데 필수적입니다. Google 글꼴을 효과적으로 사용하는 주요 측면은 속성을 이해하는 것입니다. 우리는 다음 주제를 다룰 것입니다 : Google Fonts는 무엇입니까? font-display 속성이란 무엇입니까? 프로젝트에 Google 글꼴을 추가하는 방법 링크 Google Fonts Google 폰트 가져 오기 font-display

다양한 값을 이해합니다 font-display auto

블록

스왑 폴백 선택 사항 Google fonts 속성 font-display 구현 링크를 사용하는 방법 메서드 사용 FAQ의 문제 해결 문제 : 사용자 정의 글꼴은 로드하거나 표시 할 수 없습니다 문제 : 보이지 않는 텍스트 깜박임 (FOIT) 또는 비 스타일 텍스트 플래시 (fout) 문제 : 브라우저를 가로 지르는 일관되지 않은 글꼴 렌더링 Google Fonts는 무엇입니까? Google Fonts는 Google에서 제공하는 1,000 개가 넘는 무료 라이센스 글꼴 제품군의 라이브러리입니다. 이 글꼴은 웹 사이트에 쉽게 내장되어 독특하고 전문적이며 일관된 모양을 만들 수 있습니다. Google Fonts는 성능 및 접근성에 최적화되어 웹 개발에 이상적인 선택입니다. font-display 속성이란 무엇입니까? 속성은 로딩 중 글꼴의 렌더링 동작을 제어하는 CSS 함수입니다. 보이지 않는 문자로 대체 글꼴이나 텍스트를 표시하기 전에 브라우저가 글꼴이로드 될 때까지 얼마나 오래 기다려야하는지 결정합니다. 속성을 사용하면 웹 사이트 디자인 및 성능에 대한 느린 글꼴로드의 영향을 줄임으로써 사용자 경험을 최적화 할 수 있습니다. 프로젝트에 Google 글꼴을 추가하는 방법 프로젝트에 Google 글꼴을 추가하는 두 가지 주요 방법이 있습니다 : 링크 및 가져 오기. 링크 Google Fonts 링크는 프로젝트에 Google 글꼴을 추가하는 가장 일반적인 방법입니다. 이렇게하려면 다음 단계를 따르십시오 :

Google Fonts 웹 사이트를 받으십시오.

사용하려는 글꼴을 찾거나 검색하십시오. 글꼴을 클릭하여 세부 정보 페이지를 엽니 다. 확인란을 클릭하거나 슬라이더를 사용하여 필요한 글꼴 스타일과 두께를 선택하십시오. "이 스타일 선택"버튼을 클릭하여 선택한 글꼴 스타일을 컬렉션에 추가하십시오.

내부 탭을 열면 HTML 파일의 헤더 부분에 추가 할 수있는 링크 태그가 표시됩니다. 예를 들어 "로봇"글꼴을 추가하려면 링크 태그가 다음과 같습니다. Google 폰트 가져 오기 또는 CSS 파일에서 규칙을 사용하여 Google 글꼴을 가져올 수 있습니다. 이렇게하려면 다음 단계를 따르십시오 : 링크 방법에서 1-5 단계를 따르십시오. 내용 탭에서 @import 탭으로 전환하십시오. 제공된 코드 스 니펫을 복사하여 CSS 파일 위에 붙여 넣습니다. 예를 들어 "로봇"글꼴을 가져 오려면 규칙은 다음과 같습니다. 다양한 값을 이해하십시오 속성에는 5 개의 가능한 값이 있으며 각각 렌더링 동작이 다릅니다.

auto 블록 스왑 폴백 @import 선택 사항

auto 값 값은 글꼴 렌더링 동작을 브라우저의 기본 설정에 남겨 둡니다. 이 옵션은 다른 브라우저간에 일관되지 않은 렌더링을 유발할 수 있습니다. 블록 값은 브라우저가 처음에 텍스트를 숨기고 글꼴이로드 될 때까지 기다립니다. 글꼴이 짧은 시간 동안로드되지 않으면 브라우저에 대체 글꼴이 표시됩니다. 사용자 정의 글꼴이로드되면 브라우저는 사용자 정의 글꼴을 사용하도록 텍스트를 전환합니다. 이 방법은 글꼴이로드되기를 기다리는 동안 "보이지 않는 텍스트 깜박임"(FOIT)을 유발할 수 있습니다. 스왑 값은 브라우저에 대체 글꼴을 사용하여 즉시 텍스트를 표시하고 사용자 정의 글꼴을로드 한 후 사용자 정의 글꼴로 전환하도록 지시합니다. 이 방법은 "비 스타일의 텍스트 깜박임"(Fout)을 유발할 수 있지만 사용자가 처음부터 텍스트를 볼 수 있도록합니다. @import 폴백 값은

와 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 의 조합입니다. 브라우저는 처음에 텍스트를 간단히 숨 깁니다 (보통 약 100 밀리 초). 이 시간 내에 사용자 정의 글꼴이로드되면 브라우저가 표시됩니다. 그렇지 않으면 대체 글꼴이 표시됩니다. 더 긴 시간 (보통 약 3 초) 후에 사용자 정의 글꼴이 여전히로드되지 않으면 브라우저는 대체 글꼴을 포기하고 계속 사용합니다. 선택 사항 값은 와 유사하지만 사용자 정의 글꼴이로드 될 대기 시간은 짧습니다. 이 짧은 시간 동안 (브라우저에 따라) 사용자 정의 글꼴이로드되지 않으면 브라우저는 대체 글꼴을 포기하고 계속 사용합니다. 이 접근법은 정확한 글꼴 렌더링보다 사용자 경험과 성능을 우선시합니다. Google fonts optional 속성을 사용한 구현 fallback

Google 글꼴을 사용하면 링크 또는 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 값을 설정할 수 있습니다. 이렇게하려면 다음 옵션 중 하나를 따르십시오. 링크를 사용하는 방법 위의 링크 섹션에서 1-6 단계를 따르십시오. font-display 내용 탭에서 사용자 정의 섹션을 찾으십시오. "Font-Display"드롭 다운 메뉴에서 원하는

값을 선택하십시오. 링크 태그는 선택한 @import font-display 예를 들어,

value : 가있는 "Roboto"글꼴을 추가하려면 메서드 사용 위의 수입 방법의 1-3 단계에 따라. 내용 탭에서 사용자 정의 섹션을 찾으십시오. "Font-Display"드롭 다운 메뉴에서 원하는 값을 선택하십시오. font-display 규칙은 선택한 규칙을 추가하십시오. 예를 들어 font-display value : 가있는 "Roboto"글꼴을 가져옵니다. FAQ의 문제 해결 font-display 다음은 Google Fonts 및 swap 속성을 사용할 때 몇 가지 일반적인 문제와 솔루션입니다.

문제 : 사용자 정의 글꼴은 로드하거나 표시 할 수 없습니다 링크 태그 또는 규칙을 HTML 또는 CSS 파일에 올바르게 추가했는지 확인하십시오. 링크 또는 코드에서 철자가 잘못되거나 잘못된 URL을 점검하십시오. @import 올바른 글꼴 패밀리 이름과 두께가 CSS 규칙에 사용되었는지 확인하십시오.

문제 : 보이지 않는 텍스트 깜박임 (FOIT) 또는 비 스타일 텍스트 플래시 (fout) @import 다른 또는 를 사용해보십시오. fout을 만나면 또는 를 사용하는 것을 고려하십시오. 헤더 섹션 근처 또는 CSS 파일의 상단 근처에 링크 또는 필요한 글꼴 스타일과 두께 만 선택하여 글꼴 파일 크기를 최적화하십시오. 문제 : 브라우저를 가로 지르는 일관되지 않은 글꼴 렌더링 font-display swap fallback 다른 브라우저에서 일관된 동작을 보장하기 위해 block 값을 사용하는 대신 특정 fallback 값을 설정하십시오. 다양한 브라우저에서 웹 사이트를 테스트하여 렌더링 문제를 식별하고 CSS를 조정하는 데 필요한 조정을하십시오. @import 결론 이 기사에서는 Google 글꼴 및 속성을 사용하여 시각적으로 매력적이고 고성능 웹 사이트를 만드는 방법을 살펴 봅니다. 서로 다른 값과 그 의미를 이해함으로써 글꼴 렌더링을 최적화하여 사용자 경험을 향상시킬 수 있습니다. 모양과 성능의 일관성을 보장하기 위해 다양한 브라우저 및 장치에서 구현을 테스트하십시오. 웹 개발자로서 Google 글꼴 및 특성을 프로젝트에 통합하면 광범위한 사용자의 요구를 충족시키는 전문적이고 액세스 가능한 디자인을 만들 수 있습니다. (다음은 원래 텍스트에 따라 재 작성 및 간소화 된 FAQ입니다) Google 글꼴 사용 에 대한 FAQS 사이트 성능을 향상시키기 위해 Google 글꼴을 최적화하는 방법은 무엇입니까? font-display 속성 (예 : auto 값)을 사용하거나 로컬로 관리되는 글꼴을 고려하여 HTTP 요청을 줄일 수 있습니다. Google Fonts를 사용하면 어떤 이점이 있습니까? Google Fonts는 사용하기 쉬운 광범위한 무료 오픈 소스 글꼴을 제공하고 Google에서 호스팅하고 빠르고 신뢰할 수 있으며 데스크탑 및 모바일 플랫폼에 최적화되었습니다.

WordPress 사이트에 Google 글꼴을 추가하는 방법은 무엇입니까? "Google Font Display"또는 "Fonts 플러그인"과 같은 WordPress 플러그인을 사용하여 Google 글꼴을 쉽게 추가하고 사용자 정의 할 수 있습니다. font-display font-display CSS에서 Google 글꼴을 사용하는 방법은

? > Google Fonts 웹 사이트에서 글꼴을 선택하고 제공된 링크 태그를 HTML 파일의 섹션에 복사 한 다음 CSS 규칙을 CSS 파일에 추가하십시오. font-display

오프라인으로 Google 글꼴을 사용할 수 있습니까? 글꼴 파일은 로컬로 다운로드하여 사용될 수 있지만 웹 사이트는 승인 용어의 적용을받습니다.

Google 글꼴에서 글꼴 디스플레이를 변경하는 방법은 무엇입니까? CSS에서 속성을 사용하십시오. Google Fonts가 모든 브라우저와 호환됩니까? 대부분의 최신 브라우저와 호환되지만 이전 브라우저는 특정 기능이나 글꼴을 지원하지 않을 수 있습니다. font-display

내 웹 사이트에 가장 적합한 Google 글꼴을 찾는 방법은 무엇입니까? Google Fonts 웹 사이트는 필터링 기능, 카테고리, 언어 및 기타 속성별로 글꼴 필터링 기능을 제공하며 미리 볼 수 있습니다. 내 웹 사이트에서 여러 개의 Google 글꼴을 사용할 수 있습니까? 예, 그러나 각 글꼴은 로딩 시간을 증가시키고 숫자를 제한하는 것이 좋습니다.

웹 사이트에서 Google 글꼴을 업데이트하는 방법은 무엇입니까? Google Fonts는 Google에서 호스팅되며 자동으로 업데이트됩니다. 로컬로 호스팅되면 수동으로 업데이트해야합니다.

Google Fonts 및 Font-Display를 사용하는 방법

글꼴을 클릭하여 세부 정보 페이지를 엽니 다.

블록

선택 사항 값은

: 가있는 "Roboto"글꼴을 추가하려면

로드하거나 표시 할 수 없습니다

(다음은 원래 텍스트에 따라 재 작성 및 간소화 된 FAQ입니다) Google 글꼴 사용 에 대한 FAQS

관련 기사