WordPress 블록 테마에 유체 타이포그래피 지원을 추가합니다-CSS 튜토리얼-php.cn

WordPress 블록 테마에 유체 타이포그래피 지원을 추가합니다

Jennifer Aniston

풀어 주다： 2025-03-10 10:59:08

원래의

534명이 탐색했습니다.

Adding Fluid Typography Support to WordPress Block Themes 유체 타이포그래피는 뷰포트 크기에 따라 글꼴 특성 (크기, 라인 높이)을 동적으로 조정하여 응답 성을 향상시킵니다. 반응 형 타이포그래피, Flexible Type 또는 Viewport 크기의 타이포그래피라고도 불리우며 우수한 사용자 경험을 제공합니다. 이 기사는 WordPress 6.1에서 유체 타이포그래피를 구현하여 내장 블록 편집기 기능을 활용하는 데 중점을 둡니다. 단순히

함수를

에 추가하는 동안

는 유체 텍스트를 생성하지만, True Block Edittration은 다른 접근법이 필요합니다.

. Gutenberg의 유체 타이포그래피 지지대 clamp() 많은 WordPress 테마 개발자들은 20222 개와 23 개와 같은 블록 테마를 포함하여 style.css를 테마로 활용했습니다. 그러나 Gutenberg (WordPress의 블록 편집기)는 버전 13.8에서 Fluid 타이포그래피 지원을 도입하여 블록 편집기 내에서 직접 응용 프로그램을위한 테마 수준 구현을 가능하게했습니다. 이 기능은 버전 6.1에서 WordPress Core의 일부가되었습니다. 주요 기여자 인 Rich Tabor는 기능의 힘과 단순성을 강조합니다. 이 접근법은 기본적으로 유체 글꼴 크기를 동적으로 적용하는 블록 레벨지지에 중점을 둡니다. 혜택은 다음과 같습니다.

단순화 된 테마 저자 구현. 특정 요소/블록에 대한 유지 관리 가능, 재사용 가능한 응용 프로그램 글꼴 크기 단위의 유연성 (px, rem, em, %).

WordPress 6.1은 테마 저자가 사용자 정의 코드없이 일관된 유체 타이포그래피를 구현할 수 있습니다. 타이포그래피 및 간격 설정이있는 블록

Gutenberg 14.1 (2022 년 9 월 16 일)은 수많은 블록에 타이포그래피 설정을 추가하여 블록 편집기에서 글꼴 및 간격 컨트롤을 제공합니다. 이 확장 된 기능은 WordPress 6.1에 통합됩니다 WordPress 블록 테마에서 유체 타이포그래피 구현 clamp() Fluid Typography는 블록 테마 구성 파일 인

를 통해 구현됩니다.

및 가있는 큰 글꼴을 고려하십시오. CSS의 a 기능은 다음과 같습니다

WordPress 6.1은 REM, EM 및 PX 장치를 지원합니다. 그러나 새로운 유체 유형 기능은 더 간단한 접근 방식을 제공합니다. 유체 타이포그래피 활성화 :

그런 다음 Min and Max 값에 대해
를 지정하십시오.

이것은 "큰"글꼴 크기 (2.25rem에서 3REM)에 유체 유형을 추가합니다. 그런 다음 "큰"글꼴은 글꼴 설정이있는 블록에 적용 할 수 있습니다.

WordPress는 속성을 CSS로 변환합니다 :

태그와 같은 요소에 적용됩니다. 온라인 계산기는

값을 결정하는 데 도움이 될 수 있습니다

예제 세부 테스트 지침은 관련 Github 풀 요청에서 제공됩니다. 예 1 : 새 유체 글꼴 설정 Gutenberg (13.8) 또는 WordPress 6.1이 사용되는지 확인하십시오. 유체 유형을 활성화 :

글꼴 크기 설정 추가 :

블록 편집기에"정상 "을 적용하고 프론트 엔드 마크 업 및 CSS를 확인하십시오. 예제 2 : 유체 유형에서 글꼴 설정을 제외합니다 이전과 같이 유체 유형을 활성화합니다. 글꼴 크기를 정의하고 유체 유형을 사용하여 1 :

WordPress는 유체 유형 조정에서 "추가 대형"설정을 제외하여 CSS를 생성합니다. 프론트 엔드 마크 업 및 CSS를 확인하십시오 유체 타이포그래피 지원 theme.json가있는 블록 테마 많은 테마가 유체 유형에

를 사용합니다. 최근에 출시 된 몇몇 테마는 새로운 유체 타이포그래피 기능을 지원합니다.

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

로그인 후 복사

커뮤니티 피드백 WordPress Fluid 타이포그래피 기능은 개발자 커뮤니티로부터 긍정적 인 피드백을 받았으며 개발자와 콘텐츠 소비자 모두에게 이점을 강조했습니다. 일부 개발자는 기본값이 아닌 특정 측면을 옵트 인하도록 제안합니다.

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

로그인 후 복사

결론 WordPress 유체 타이포그래피 기능이 적극적으로 개발되었습니다. 현재 사용할 수 있지만 테마 저자는주의를 기울여 관련 GitHub 문제를 모니터링해야합니다. 수많은 자원은 유체 타이포그래피 및 WordPress에서의 구현에 대한 추가 정보를 제공합니다.

위 내용은 WordPress 블록 테마에 유체 타이포그래피 지원을 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!