Akışkan tipografisi bir süslü yol "Görüntü alanının boyutuna göre akıcı bir şekilde ölçeklenen boyut veya satır yüksekliği gibi yazı tipi özelliklerini tanımlama". Onun başka isimlerle de bilinir, duyarlı tipografi, esnek yazı, akıcı yazı, görüntü alanı boyutlu tipografi, akıcı tipografi ve hatta duyarlı ekran metni gibi.
Olmaksızın akışkan tipografi örneği canlı oynayabileceğiniz (nezaket MDN belgeleri). CSS-Tricks, akıcı tipografiyi kapsıyor kapsamlı olarak da. Ama burada amaç sizi akıcı tipografi ile tanıştırmak değil, onu nasıl kullanacağınızı anlatmak. Daha spesifik olarak, son zamanlarda doğrudan WordPress Blok Düzenleyici'de bir akışkan türü özelliği sunan WordPress 6.1'de akışkan tipografisinin nasıl uygulanacağını göstermek istiyorum.
Aç senin style.css dosya, süslü bir stil kuralına tokat at clamp()-üzerinde font-size mülk ve gitmek güzel, değil mi? Elbette, bu size akıcı metin verecek, ancak WordPress sitenizin herhangi bir yerinde akıcı tip uygulamayı mümkün kılan Blok Düzenleyici kontrollerini elde etmek için mi? Bu bloklanmış günlerde farklı bir yaklaşım gerektiriyor.
Gutenberg'de akışkan tipografi desteği
Bazı WordPress tema geliştiricileri, clamp() bir sıvıyı tanımlama işlevi font-size, WordPress temalarında, hatta daha yeni "blok" temalarında bile yirmi yirmi iki, Yirmi Yirmi Üç, Ve diğerleri.
Ancak WordPress Blok ve Site Düzenleyici özellikleri için deneysel geliştirme içeren Gutenberg eklentisi, akıcı tipografi için destek sağladı. 13.8 sürümünden başlayarak. Bu, akışkan türün doğrudan Blok Düzenleyici'de belirli öğelere ve bloklara uygulanabilmesi için bir tema düzeyinde uygulamanın kapısını açtı. CSS-Tricks'e bir not bile verildi. Çekme İsteği bu özelliği birleştirdi.
Bu çalışma, WordPress Core'un bir parçası oldu. WordPress 6.1. Blok Düzenleyici'de akışkan tipografinin daha önceki savunucularından biri olan Rich Tabor şöyle diyor:
[Akışkan tipografi] aynı zamanda WordPress'i daha güçlü hale getirmenin bir parçası, ancak daha karmaşık değil (hepimiz bunun oldukça zor olduğunu biliyoruz). […] Akışkan tipografi sadece işe yarar. Aslında, bence harika çalışıyor.
Bu WordPress gönderisini öne çıkarın özelliği blok düzeyinde desteklemek için alınan yaklaşım, böylece bloklara varsayılan olarak dinamik olarak değişken bir yazı tipi boyutu uygulanır. Var bazı faydalar buna tabii ki:
- Tema yazarlarının, kodda uygulama konusunda endişelenmeden akıcı tipografiyi etkinleştirmesi için bir yol sağlar.
- Elemanlar veya bloklar gibi belirli tipografik varlıklara sürdürülebilir ve yeniden kullanılabilir bir şekilde akışkan tipografi uygular.
- Yazı tipi boyutu birimleri açısından esneklik sağlar (örn.
px,rem,em, ve%).
Artık bu yeni özellik WordPress Blok Düzenleyici'de varsayılan olarak mevcut olduğundan, tema yazarları ek kod yazmadan tek tip akışkan tipografi uygulayabilir.
Tipografi ve boşluk ayarlarını destekleyen bloklar
Gutenberg 14.1 16 Eylül 2022'de yayınlandıreleased on September XNUMX, XNUMXve bir grup blokta tipografik ayarları tanıttı. Bu, bu blokların metin ayarlarının daha önce CSS'de ayarlandığı ve CSS'de de değiştirilmesi gerektiği anlamına gelir. Ancak bu bloklar artık Blok Düzenleyici arayüzünde yazı tipi ve boşluk kontrolleri sağlıyor.
Bu çalışmanın şu anda WordPress 6.1'e eklenmesi planlanıyor. bu WordPress blog yazısı yap. Ve bununla birlikte, tipografi desteğine sahip genişletilmiş blok sayısı.
WordPress blok temasında akışkan türü bildirme
Peki, bu yeni akıcı tipografiyi WordPress'te nasıl kullanacağız? cevap içinde theme.json, anahtar:değer çiftlerinde bir dizi tema yapılandırması içeren temaları engellemeye özel yeni bir dosya.
Büyük bir yazı tipi için bir kurala bakalım theme.json nerede contentSize: 768px ve biz bir ile çalışıyoruz widesize: 1600px Yerleşim. Bu şekilde bir CSS belirtebiliriz font-size ile clamp() işlevi:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}WordPress 6.1'den itibaren, yalnızca rem, em ve px birimleri desteklenmektedir.
Bu harika ve işe yarıyor, ancak yeni sıvı türü özelliğiyle aslında farklı bir yaklaşım kullanırdık. İlk olarak, akışkan tipografisini seçiyoruz settings.typography, sahip olduğu yeni fluid özelliği:
"settings": {
"typography": {
"fluid": true
}
}Daha sonra kendimizi belirtiriz settings.fontSizes eskisi gibi ama yeni fluidSize ayarlayabileceğimiz özellik min ve max sıvı tipi aralığımız için boyut değerleri.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}Gerçekten bu. "Large" adlı bir yazı tipi boyutuna değişken yazı tipini ekledik ve şuradan başlayan bir aralıkla: 2.25rem ve ölçeklenir 3rem. Artık “Large” fontunu font ayarları ile herhangi bir bloğa uygulayabiliriz.
Bu, kaputun altında nasıl çalışır? Zengin Tabor güzel bir açıklama sunuyorolduğu gibi GitHub'daki bu Çekme İsteği. Kısacası, WordPress dönüştürür theme.json özellikleri aşağıdaki CSS kuralına ekleyin:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}…öğeye uygulanan, bir Paragraf Bloğu söyleyin:
...
Başlangıçta, CSS kavramını anlamakta ve aklımda sarmakta zorlandım. clamp() hakkında bir şey öğrenmeden işlev min(), max(), ve calc() fonksiyonlar. Bu hesap makinesi aracı özellikle kendi tema projelerimde hangi değerleri kullanacağımı belirlememde bana çok yardımcı oldu.
Gösteri amacıyla, hesap makinemizi kullanarak tanımlayalım. font-size boyut olacak şekilde aralık 36px Bir de 768px görüş alanı genişliği ve 48px Bir de 1600px görüş alanı genişliği.
Hesap makinesi otomatik olarak aşağıdaki CSS'yi oluşturur:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);Hesap makinesi, giriş birimlerini şu şekilde seçmek için seçenekler sunar: px, rem, ve em. seçersek rem birim, hesap makinesi aşağıdakileri üretir clamp() değeri:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Böylece, bu minimum ve maksimum değerler, fluidSize.min ve fluidSize.max değerler theme.json. min değer, görünüm alanlarında uygulanır. 768px geniş ve aşağıda. Sonra font-size görüntü alanı genişliği büyüdükçe ölçeklenir. Görünüm alanı şundan daha genişse 1600px, max uygulanır ve font-size orada kapatılır.
Örnekler
Var detaylı test talimatları özelliği tanıtan birleştirilmiş Çekme İsteğinde. Daha da fazla test talimatı var Justin Tadlock'un Make WordPress'teki yayın öncesi gönderisi.
Örnek 1: Yeni bir akıcı yazı tipi ayarı belirleme
Justin'in talimatlarıyla başlayalım. Varsayılanın değiştirilmiş bir versiyonunda kullandım Yirmi Yirmi Üç teması şu anda geliştirme aşamasında olan.
İlk olarak, Gutenberg eklentisini (13.8 ve üstü) veya WordPress 6.1'i çalıştırdığımızdan emin olalım, ardından settings.typography.fluid mülkiyet theme.json Dosya:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Şimdi bırakalım settings.typography.fontSizes ordaki örnekler:
{
"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"
}
]
}
}
}Her şey düzgün çalışıyorsa, şimdi WordPress Blok Düzenleyicisine gidebilir ve “Normal” yazı tipi ayarını bloğumuza uygulayabiliriz:
Güzel! Ve bu elemanı ön uçta kaydedip incelersek, işaretleme şudur:
Çok iyi. Şimdi CSS'nin gerçekten orada olduğundan emin olalım:
İyi iyi. Bir şeyleri gerçekten sıkıştırıp sıkıştırmadığını görmek için bu CSS özel özelliğini açığa çıkaralım:
Görünüşe göre her şey tam istediğimiz gibi çalışıyor! Bir başka örneğe bakalım…
Örnek 2: Bir yazı tipi ayarını akışkan türünden hariç tutma
Bu sefer takip edelim birleştirilmiş Çekme İsteğinden gelen talimatlar Belirli bir yazı tipi ayarında akışkan türünü nasıl devre dışı bırakabileceğimizi gösteren Carolina Nymark'ın bu örneğine bir selam ile.
Kullandım boş tema talimatlarda önerildiği gibi ve açıldı theme.json test için dosya. İlk olarak, tam olarak daha önce yaptığımız gibi sıvı türünü seçiyoruz:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Bu sefer daha küçüklerle çalışıyoruz. wideSize değeri 1000px yerine 1600px. Bu, tam bir aralıkta çalışan sıvı tipini görmemize izin vermelidir.
Tamam, altında bazı özel yazı tipi boyutlarını tanımlamaya devam 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"
}
]
}
}
}Değişken yazı tipi özelliğini yalnızca “Normal”, “Orta” ve “Büyük” yazı tipi ayarlarına uyguladığımıza dikkat edin. "Ekstra Büyük", fluid nesne olarak ayarlandı false.
WordPress buradan ne yapar? Gutenberg tarzı motor — belirlediğimiz özellikleri CSS'ye uygulamaktır clamp() Değişken türü ve Ekstra Büyük ayarı için tek bir boyut değerini seçen her yazı tipi boyutu ayarı için işlevler:
--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;Ön uçtaki işaretlemeyi kontrol edelim:
İyi başlangıç! olduğunu teyit edelim .has-x-large-font-size sınıf, sıvı türünden hariç tutulur:
ifşa edersek --wp--preset--font-size--x-large değişken, ayarlandığını göreceğiz 2.25rem.
Tam olarak istediğimiz şey bu!
Akışkan tipografiyi destekleyen temaları engelleyin
Birçok WordPress teması zaten clamp() hem blok hem de klasik temalarda akışkan türü için işlev. Akışkan tipografi kullanımına iyi bir örnek, yakın zamanda yayınlanan Yirmi Yirmi Üç varsayılan tema.
Tüm blok temalarını inceledim WordPress Blok Tema dizini, inceliyor theme.json Her temanın dosyasını ve şu anda kaç tane blok temanın akıcı tipografiyi desteklediğini görmek için - bu yazı itibariyle hala Gutenberg eklentisinde olduğundan yeni özellik değil - CSS kullanarak clamp() işlev. İncelediğim 146 temanın çoğu, clamp() Boşluğu tanımlama işlevi. Yarısından biraz fazlası kullanıldı clamp() yazı tipi boyutlarını tanımlamak için. bu Alara tema kullanılacak tek şey clamp() tanımlamak için düzen kapsayıcı boyutları.
Anlaşılır bir şekilde, yalnızca yakın zamanda piyasaya sürülen birkaç tema, yeni akışkan tipografi özelliğini içerir. Ama işte onu tanımlayan bulduğum şeyler theme.json:
Ve burada CSS-Tricks ile ilgili önceki yazımı okursanız, TT2 Gopher Blokları Demo için kullandığım tema da akıcı tipografi özelliğini destekleyecek şekilde güncellendi.
WordPress akışkan tipografi özelliklerine seçilen tepkiler
WordPress'te ayarlar düzeyinde akıcı tipografiye sahip olmak çok heyecan verici! Bu konuda yorum yapan WordPress geliştirici topluluğundaki insanların bazı düşüncelerini paylaşacağımı düşündüm.
Gutenberg projesinin baş mimarı Matias Ventura:
WordPress'te güzelce zengin sayfalar yayınlamaya yönelik en büyük çabalardan biri olan akıcı tipografi, hem WordPress ile inşa edenler hem de içeriği tüketenler için oldukça büyük bir deneyim kazanıyor.
otomatik geliştirici Ramon Dodd yorumladı Çekme İsteğinde:
Bu fikri, aşağıdakiler tarafından tanımlananlar gibi belirli görüntü alanı boyutlarına yanıt veren yazı tipi boyutlarıyla karşılaştırın. medya sorguları, ancak bu boyutlar arasında hiçbir şey yapmayın.
theme.jsonzaten yazarların kendi değişken yazı tipi boyutu değerlerini eklemelerine izin verir. Bu değişmeyecek, ancak bu Halkla İlişkiler, uygulama ayrıntıları hakkında endişelenmek istemeyen insanlara sunuyor.
Nick Croft, GenesisWP'nin yazarı:
Brian Garner, WPEngine'de tasarımcı ve baş geliştirici savunucusu:
Birkaç geliştirici düşünmek bazı özellikler bir tercih olmalıdır. Jason Crist Automattic diyor ki:
Akışkan tipografinin gücünü seviyorum, ancak bunun yalnızca varsayılan olarak etkinleştirilmesi gerektiğine de inanmıyorum. Kullanımı (ve detayları) dikkatle alınması gereken önemli tasarım kararlarıdır.
Ayrıca resmi olarak bir sürü daha fazla yorum bulabilirsiniz. test talimatları özellik için.
Tamamlayan
WordPress'teki akışkan tipografi özelliği, hala aktif geliştirme aşamasında bu yazının yazıldığı sırada. Bu nedenle, şu anda, tema yazarları onu kullanmaya devam etmeli, ancak dikkatli bir şekilde ve resmi olarak yayınlanmadan önce bazı olası değişiklikleri beklemelidir. Justin uyarıyor Bu özelliği kullanan tema yazarları ve aşağıdaki iki GitHub sorununa dikkat etmenizi önerir:
Ayrıca hala birçok devam eden iş tipografi ve tasarımla ilgili diğer WordPress araçları hakkında. merak ediyorsan bunu izle tipografi izleme GitHub bileti ve GitHub sorunlarıyla ilgili tasarım araçları.
Kaynaklar
Akışkan türünü ve WordPress'in bunu bir özellik olarak nasıl uyguladığını araştırırken aşağıdaki makaleleri kullandım.
