찾다
웹 프론트엔드CSS 튜토리얼WordPress 블록 테마의 글꼴 관리

Managing Fonts in WordPress Block Themes 웹 사이트 디자인은 타이포그래피에 달려 있습니다. WordPress 테마는 종종 클래식 PHP 테마를 위해 커스터마이저 내에서 쉽게 관리하는 Google Fonts와 같은 서비스를 통합합니다. 그러나 이것은 블록 테마에 대해 간단하지 않습니다. 클래식 테마 통합은 잘 문서화되어 있지만 블록 테마 글꼴 관리에도 비슷한 지침이 부족합니다. 이 기사는 그 차이를 다룹니다. 블록 테마

Google 글꼴을 사용할 수 있지만 등록 프로세스는 기존 방법과 크게 다릅니다. 기존 지식 글꼴을 블록 테마에 통합하기위한 리소스는 처음에는 거의 거의 없었습니다. 최초의 기본 블록 기반 테마 인 22 개의 22 개는 다운로드 된 글꼴 파일을 테마 자산으로 사용하여 시연했습니다. 여기에는 에 파일을 등록하고 번들 글꼴을 정의하는 것이 포함되어 있습니다.-번거로운 2 단계 프로세스. 이후의 테마는 203 명과 마찬가지로 명시 적 등록없이 번들 글꼴을 정의하여이를 단순화했습니다. 그러나 수동 글꼴 다운로드 및 번들링은 남아있어 CDN을 통해 제공되는 호스팅 글꼴의 편의성을 무시합니다. 최근 발전 다가오는 블록 및 사이트 편집기 기능을 테스트하기위한 플러그인 인 Gutenberg 프로젝트는 솔루션을 제공합니다. Gutenberg의 리드 아키텍트 인 Matias Benedetto는 Create Block 테마 플러그인을 통해 블록 테마에서 Google Fonts (또는 다운로드 된 글꼴)를 사용하여 강조했습니다. Learn WordPress는이 플러그인의 비디오 개요를 제공하여 WordPress UI 컨트롤을 제공하여 테마 생성을 단순화합니다. 템플릿 파일을 코딩하거나 수정하지 않고 전체 테마, 하위 테마 또는 스타일 변형을 만들 수 있습니다. WordPress.org 팀이 작성하고 유지하고 있으며 현재 블록 테마에서 Google 글꼴 통합을위한 최상의 접근 방식입니다. 그러나 활발한 개발 중이므로 변경 사항을 기대하십시오. 이 새로운 방법을 탐색하기 전에 고전적인 테마에 대한 전통적인 접근 방식을 검토해 봅시다. 전통적인 방법 Themeshaper (2014) 및 Cloudways와 같은 기사는 고전적인 방법을 보여줍니다. 스물 17 개의 테마는

: 의 Google 글꼴을 흡수합니다.

Google 글꼴을 사전 연결 :

전통적인 방법의 단점 이 방법은 중요한 단점이 있습니다. 2022 년 독일 법원 판결은 Google 글꼴을 수용 할 때 방문자 IP 주소의 노출로 인해 GDPR 위반을 강조했습니다. 이 문제는 Create Block 테마 플러그인에서 다루어집니다. functions.php 블록 테마가있는 Google 글꼴을 사용합니다 (현대적인 방법) 최신 접근 방식은 블록 테마 플러그인 만들기를 사용합니다. 로컬 개발 환경 (예 : 플라이휠 로컬 사용)을 설정하고 테마 테스트 데이터를 설치하고 블록 테마 플러그인을 만듭니다.

로 이동하여 테마 글꼴 관리 로 이동하십시오. 이 화면은 정의 된 글꼴을 나열하고 다음과 같은 옵션을 제공합니다 Google 글꼴 추가 : Google 글꼴 API에서 직접 글꼴을 추가합니다. 로컬 글꼴 추가 :

업로드 된 글꼴 파일을 추가합니다
    빈 테마를 사용하여 (예 : 빈도, 명확성을 위해 이름이 바뀌 었음) Google 글꼴을 추가하여 (Inter)를 자동으로 다운로드하여 테마의
  • 폴더에 저장하고 : Theme.JSON 코드
  • 그런 다음 사이트 편집기의 글로벌 스타일에서 글꼴을 사용할 수 있습니다. 로컬 글꼴을 추가하는 것도 비슷하게 작동하여 수동 수정과 비교하여 프로세스를 단순화합니다. 글꼴 제거는 플러그인의 인터페이스 내에서 처리됩니다 미래의 발전
  • "Font Manager"기능은 WordPress Core를 위해 계획되어 있으며 유사한 기능을 제공합니다.
결론 Create Block 테마 플러그인은 WordPress 블록 테마에서 글꼴 관리를 간소화하여 사용자 친화적이고 GDPR 호환 솔루션을 제공합니다. 직접 코드 상호 작용없이 글꼴을 추가, 제거 및 관리하는 것을 단순화합니다.

추가 읽기 (리소스 목록은 동일하게 유지되며, 더 나은 가독성을 위해 재구성) assets/fonts theme.json WordPress 글꼴 관리 :

WordPress 블록 테마에 타이포그래피 글꼴을 추가하는 방법 (테마 셰이퍼) WordPress 테마에 Google 글꼴을 추가하는 방법 (테마 셰이퍼) WordPress와 함께 Google 글꼴을 사용하는 방법은 무엇입니까? (Cloudways) 블록 테마를 사용하여 블록 테마를 관리하십시오 (WordPress 학습)

작성 블록 테마를 사용하여 (WordPress.tv)

github 문제 :
function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

글로벌 스타일/타이포그래피 : 글꼴 세트 관리 (#45271) 글꼴 관리자 (#46332)

유럽 GDPR 요구 사항 :

Google 호스팅 글꼴 (wptavern)을 사용하여 GDPR을 위반 한 독일 법원 Fines 웹 사이트 소유자 Google Fonts를 사용할 때 GDPR 준수 (WordPress 테마 만들기) Google Fonts (eprivacy Blog) 사용에 대한 웹 사이트 운영자에 대한 손상으로 독일 법원 Awards 사용자 € 100 토끼 글꼴 (CSS- 트릭) functions.php

위 내용은 WordPress 블록 테마의 글꼴 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
CSS 그리드는 무엇입니까?CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

CSS 박스 크기 부동산은 무엇을합니까?CSS 박스 크기 부동산은 무엇을합니까?Apr 30, 2025 pm 03:18 PM

이 기사는 요소 치수 계산 방법을 제어하는 ​​CSS 박스 크기 속성에 대해 설명합니다. Content-Box, Border-Box 및 Padding-Box와 같은 값과 레이아웃 설계 및 형태 정렬에 미치는 영향을 설명합니다.

CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?Apr 30, 2025 pm 03:17 PM

기사는 CSS, 주요 특성 및 JavaScript와 결합 된 애니메이션 작성에 대해 논의합니다. 주요 문제는 브라우저 호환성입니다.

CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?Apr 30, 2025 pm 03:16 PM

기사는 3D 변환, 주요 속성, 브라우저 호환성 및 웹 프로젝트에 대한 성능 고려 사항에 대한 CSS 사용에 대해 논의합니다. (문자 수 : 159)

CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?Apr 30, 2025 pm 03:15 PM

이 기사는 CSS 그라디언트 (선형, 방사형, 반복)를 사용하여 웹 사이트 비주얼을 향상시키고 깊이, 초점 및 현대적인 미학을 추가합니다.

CSS의 의사 요소는 무엇입니까?CSS의 의사 요소는 무엇입니까?Apr 30, 2025 pm 03:14 PM

기사는 CSS의 의사 요소, HTML 스타일을 향상시키는 데 사용 및 의사 급의 차이점에 대해 설명합니다. 실제 사례를 제공합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.