플루이드 타이포그래피는 멋진 방법 "표시 영역의 크기에 따라 유동적으로 조정되는 크기 또는 줄 높이와 같은 글꼴 속성 설명"의. 이것의 다른 이름으로도 알려진, 반응형 타이포그래피, 플렉서블 타입, 플루이드 타입, 뷰포트 크기 타이포그래피, 플루이드 타이포그래피, 심지어 반응형 디스플레이 텍스트까지.
여기입니다 플루이드 타이포그래피의 예 라이브로 플레이할 수 있습니다(제공: MDN 문서). CSS-Tricks는 유동적인 타이포그래피를 다루었습니다. 그것도 광범위하게. 그러나 여기서 요점은 유동적인 타이포그래피를 소개하는 것이 아니라 사용 방법을 소개하는 것입니다. 좀 더 구체적으로 말하면, 최근 워드프레스 블록에디터에 직접 플루이드 타입 기능을 도입한 워드프레스 6.1에서 플루이드 타이포그래피를 구현하는 방법을 보여드리고자 합니다.
너를 열어 라. style.css 파일, 멋진 스타일 규칙으로 때리다 clamp()-ing에 font-size 재산, 좋은 일이죠? 물론, 유동적인 텍스트를 제공하지만 WordPress 사이트의 어느 곳에서나 유동적인 유형을 적용할 수 있는 블록 편집기 컨트롤을 얻으려면? 차단된 이 시대에는 다른 접근 방식이 필요합니다.
Gutenberg의 Fluid typography 지원
일부 WordPress 테마 개발자는 clamp() 유체를 정의하는 함수 font-size, WordPress 테마, 심지어 다음과 같은 새로운 "차단" 테마에서도 스물 스물 둘, 스물 스물셋그리고 다른 사람.
그러나 WordPress Block 및 Site Editor 기능에 대한 실험적 개발이 포함된 Gutenberg 플러그인은 유동적인 타이포그래피에 대한 지원을 도입했습니다. 버전 13.8부터 시작. 이는 블록 편집기에서 직접 특정 요소와 블록에 유체 유형을 적용할 수 있도록 테마 수준에서 구현할 수 있는 문을 열었습니다. CSS-Tricks는 심지어 당김 요청 기능을 병합한 것입니다.
그 작업은 WordPress Core의 일부가 되었습니다. 워드 프레스 6.1. 블록 편집기에서 유동적 타이포그래피의 초기 옹호자 중 한 명인 Rich Tabor는 다음과 같이 말합니다.
[Fluid typography]는 WordPress를 더 강력하게 만드는 부분이기도 하지만 더 복잡하지도 않습니다. [...] Fluid typography는 작동합니다. 실제로, 나는 그것이 훌륭하게 작동한다고 생각합니다.
이 WordPress 게시물 하이라이트 만들기 유동적인 글꼴 크기가 기본적으로 블록에 동적으로 적용되도록 블록 수준에서 기능을 지원하기 위해 취한 접근 방식입니다. 있다 일부 혜택 물론 이것에:
- 테마 작성자가 코드에서 구현하는 것에 대해 걱정하지 않고 유동적인 타이포그래피를 활성화할 수 있는 방법을 제공합니다.
- 유지 및 재사용이 가능한 방식으로 요소 또는 블록과 같은 특정 타이포그래피 엔티티에 유동적인 타이포그래피를 적용합니다.
- 글꼴 크기 단위(예:
px,rem,em및%).
이제 이 새로운 기능을 기본적으로 WordPress 블록 편집기에서 사용할 수 있으므로 테마 작성자는 추가 코드를 작성하지 않고도 균일한 유동 타이포그래피를 적용할 수 있습니다.
타이포그래피 및 간격 설정을 지원하는 블록
구텐베르크 14.1 릴리스 날짜 : 16 년 2022 월 XNUMX 일 released on September XNUMX, XNUMX, 그리고 많은 블록에 타이포그래피 설정을 도입했습니다. 이는 해당 블록에 대한 텍스트 설정이 이전에 CSS에서 설정되었고 CSS에서도 변경되어야 함을 의미합니다. 그러나 이러한 블록은 이제 블록 편집기 인터페이스에서 글꼴 및 간격 제어를 제공합니다.
해당 작업은 현재 WordPress 6.1에 추가될 예정입니다. 이 Make WordPress 블로그 게시물. 그리고 타이포그래피를 지원하는 확장된 블록 수입니다.
WordPress 블록 테마에서 유체 유형 선언
그렇다면 이 새로운 유동적인 타이포그래피를 WordPress에서 사용하려면 어떻게 해야 할까요? 답은 에 있다 theme.json, 키:값 쌍에 여러 테마 구성이 포함된 블록 테마에 특정한 새로운 파일입니다.
큰 글꼴에 대한 규칙을 살펴보겠습니다. theme.json 어디에 contentSize: 768px 그리고 우리는 함께 일하고 있습니다 widesize: 1600px 형세. 이것이 CSS를 지정하는 방법입니다. font-size 를 사용하여 clamp() 기능:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}워드프레스 6.1부터 rem, em 및 px 단위가 지원됩니다.
그것은 훌륭하고 작동하지만 새로운 유체 유형 기능을 사용하면 실제로 다른 접근 방식을 사용할 것입니다. 먼저 유동적 타이포그래피를 선택합니다. settings.typography, 새로운 fluid 재산:
"settings": {
"typography": {
"fluid": true
}
}그런 다음 우리는 우리의 settings.fontSizes 이전과 동일하지만 새로운 fluidSize 설정할 수 있는 속성 min 및 max 유체 유형 범위에 대한 크기 값.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}그게 다야 에서 시작하는 범위로 "Large"라는 글꼴 크기에 유동 유형을 추가했습니다. 2.25rem 최대 규모 3rem. 이제 글꼴 설정이 있는 모든 블록에 "Large" 글꼴을 적용할 수 있습니다.
이것은 후드 아래에서 어떻게 작동합니까? Rich Tabor는 좋은 설명을 제공합니다.마찬가지로 GitHub의 이 풀 리퀘스트. 간단히 말해서 WordPress는 theme.json 속성을 다음 CSS 규칙에 추가합니다.
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}...요소에 적용되는 단락 블록:
...
처음에는 CSS의 개념을 이해하고 머릿속으로 감싸는 것이 어려웠습니다. clamp() 기능에 대해서도 배우지 않고 min(), max()및 calc() 기능. 이 계산기 도구 특히 내 자신의 테마 프로젝트에서 사용할 값을 결정하는 데 상당한 도움이 되었습니다.
데모 목적으로 계산기를 사용하여 font-size 크기가 되도록 범위 36px 에 768px 뷰포트 너비 및 48px 에 1600px 뷰포트 너비.
계산기는 다음 CSS를 자동으로 생성합니다.
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);계산기는 다음과 같이 입력 단위를 선택하는 옵션을 제공합니다. px, rem및 em. 우리가 선택하면 rem 단위로 계산하면 계산기는 다음을 생성합니다. clamp() 값 :
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);따라서 해당 최소값과 최대값은 fluidSize.min 및 fluidSize.max 값 theme.json. 그만큼 min 값은 다음과 같은 뷰포트에 적용됩니다. 768px 넓고 아래. 그런 다음 font-size 뷰포트 너비가 커짐에 따라 확장됩니다. 뷰포트가 다음보다 넓은 경우 1600pxWalk Through California 프로그램, max 적용되고 font-size 거기에 캡이 있습니다.
예
다음의 자세한 테스트 지침 기능을 도입한 병합된 pull 요청에서. 더 많은 테스트 지침이 있습니다. Make WordPress에 대한 Justin Tadlock의 출시 전 게시물.
예 1: 새 유동 글꼴 설정 지정
Justin의 지침부터 시작하겠습니다. 기본값의 수정된 버전에서 사용했습니다. 스물 스물셋 테마 현재 개발 중인 것입니다.
먼저 Gutenberg 플러그인(13.8 이상) 또는 WordPress 6.1을 실행하고 있는지 확인한 다음 settings.typography.fluid 재산 theme.json 파일 :
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}자, 버리자 settings.typography.fontSizes 거기에 있는 예:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}모든 것이 올바르게 작동하면 이제 WordPress 블록 편집기로 이동하여 "일반" 글꼴 설정을 블록에 적용할 수 있습니다.
멋진! 그리고 프런트 엔드에서 해당 요소를 저장하고 검사하면 다음과 같은 마크업이 표시됩니다.
매우 좋은. 이제 CSS가 실제로 존재하는지 확인하십시오.
좋다 (좋아요. CSS 사용자 정의 속성을 노출하여 실제로 문제가 있는지 확인하겠습니다.
모든 것이 우리가 원하는 대로 작동하는 것 같습니다! 다른 예를 보자...
예 2: 유체 유형에서 글꼴 설정 제외
이번엔 따라해보자 병합된 pull 요청의 지침 특정 글꼴 설정에서 유체 유형을 비활성화할 수 있는 방법을 보여주는 Carolina Nymark의 이 예에 대한 고개를 끄덕입니다.
내가 사용 빈 테마 지침에서 조언하고 열었습니다. theme.json 테스트용 파일입니다. 먼저 이전과 동일하게 유체 유형을 선택합니다.
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}이번에는 더 작은 wideSize 의 가치 1000px 대신 1600px. 이를 통해 정확한 범위에서 작동하는 유체 유형을 볼 수 있습니다.
자, 다음에서 일부 사용자 정의 글꼴 크기를 정의합니다. settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}"Normal", "Medium" 및 "Large" 글꼴 설정에만 유동 유형 기능을 적용했습니다. "Extra Large"는 이상한 곳입니다. fluid 개체는 다음으로 설정됩니다. false.
여기에서 WordPress가 수행하는 작업 - 통해 구텐베르크 스타일 엔진 — CSS에 설정한 속성을 적용합니다. clamp() 유체 유형 및 초대형 설정에 대한 단일 크기 값을 선택한 각 글꼴 크기 설정에 대한 기능:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;프런트 엔드의 마크업을 확인해 보겠습니다.
좋은 시작! 확인해보자 .has-x-large-font-size 클래스는 유체 유형에서 제외됩니다.
우리가 노출하면 --wp--preset--font-size--x-large 변수, 우리는 그것이 2.25rem.
그것이 바로 우리가 원하는 것입니다!
유동적인 타이포그래피를 지원하는 블록 테마
많은 WordPress 테마는 이미 clamp() 블록 및 클래식 테마 모두에서 유체 유형에 대한 기능. 플루이드 타이포그래피 사용의 좋은 예는 최근 출시된 Twenty Twenty-Three 기본 테마.
나는 모든 블록 테마를 검토했습니다. 워드프레스 블록 테마 디렉토리, 검사 theme.json CSS를 사용하여 각 테마의 파일을 보고 현재 유동적인 타이포그래피를 지원하는 블록 테마 수를 확인합니다. clamp() 기능. 내가 검토한 146개의 테마 중 대부분은 clamp() 간격을 정의하는 기능입니다. 절반 이상이 사용 clamp() 글꼴 크기를 정의합니다. 그만큼 알라라 테마는 사용할 수 있는 유일한 것입니다. clamp() 정의하기 위해 레이아웃 컨테이너 크기.
이해할 만하게도 최근에 출시된 몇 가지 테마에만 새로운 유동적인 타이포그래피 기능이 포함되어 있습니다. 그러나 여기에서 그것을 정의하는 것을 발견했습니다. theme.json:
그리고 여기 CSS-Tricks에 대한 제 이전 게시물을 읽으셨다면 TT2 고퍼 블록 데모에 사용한 테마도 유동적인 타이포그래피 기능을 지원하도록 업데이트되었습니다.
WordPress 유동적 타이포그래피 기능에 대한 선별된 반응
WordPress의 설정 수준에서 유동적인 타이포그래피를 사용하는 것은 매우 흥미진진합니다! 이에 대해 언급한 WordPress 개발자 커뮤니티의 사람들로부터 몇 가지 생각을 공유하고 싶습니다.
Gutenberg 프로젝트의 수석 설계자인 Matias Ventura:
WordPress에서 아름답고 풍부한 페이지를 게시하기 위한 더 큰 노력 중 하나인 Fluid typography는 WordPress로 구축하는 사람들과 콘텐츠를 소비하는 사람들 모두에게 꽤 큰 경험 승리입니다.
이 아이디어를 미디어 쿼리, 그러나 그 크기 사이에는 아무 것도 하지 마십시오.
theme.json이미 작성자는 자신의 유동적인 글꼴 크기 값을 삽입할 수 있습니다. 이것은 변경되지 않지만 이 PR은 구현 세부 사항에 대해 걱정하고 싶지 않은 사람들에게 제공합니다.
닉 크로프트, GenesisWP의 저자:
브라이언 가너, WPEngine의 디자이너이자 주요 개발자 옹호자:
소수의 개발자 생각 일부 기능은 선택해야 합니다. 제이슨 크리스트 Automattic의 말:
저는 유동적인 타이포그래피의 힘을 좋아하지만 기본적으로 활성화되어야 한다고 생각하지 않습니다. 사용법(및 세부 사항)은 신중하게 결정해야 하는 중요한 디자인 결정입니다.
공식에서 더 많은 의견을 찾을 수도 있습니다. 테스트 지침 기능을 위해.
최대 포장
WordPress의 유동적인 타이포그래피 기능은 다음과 같습니다. 여전히 활발한 개발 중 이 글을 쓰는 시점에서. 따라서 지금 테마 작성자는 계속 사용을 해야 하지만 공식적으로 출시되기 전에 주의하고 약간의 변경 가능성을 예상해야 합니다. 저스틴 경고 테마 작성자는 이 기능을 사용하고 다음 두 가지 GitHub 문제를 주시할 것을 제안합니다.
역시 아직 많다 진행중인 작업 타이포그래피 및 기타 디자인 관련 WordPress 도구. 관심있으시면 이거 보세요 타이포그래피 추적 GitHub 티켓 및 디자인 도구 관련 GitHub 문제.
제품 자료
유체 유형과 WordPress가 이를 기능으로 구현하는 방법을 조사할 때 다음 기사를 사용했습니다.
