Google Fonts, v2 API güncellemesindeki deÄiÅken yazı tiplerini artık tam olarak desteklemektedir. Tek ve birden fazla yazı tipi ailesini nasıl arayacaÄınızı ve eksen aralıklarının nasıl belirtileceÄini açıklayacaÄız. DeÄiÅken yazı tipleriyle ilgili ayrıntılı bilgi edinmek için TypeNetwork sitesinde David Berlow'un yaptıÄı etkileÅimli Åekilde resmedilmiÅ bu broÅürle daha fazla bilgi edinin.
Yenilikler
Her Åey yeni bir temel URL ile baÅlar:
https://fonts.googleapis.com/css2
Her ailede stilleri belirtmek için kullanılan söz dizimi, deÄiÅken tasarım "yazım alanları"nı açıklayan Åekilde deÄiÅtirildi.
Hızlı baÅlangıç kılavuzları
Bu HTML dosyasını kopyalayıp bir dosyaya yapıÅtırın:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro"> <style> body { font-family: 'Crimson Pro', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Sayfayı açmak için tarayıcı kullanılarak sayfa Crimson Pro yazı tipinde "Web'i Güzel Hale Getirme" metni oluÅturulmalıdır.
Birden fazla aile
Birden fazla aile istemek için her ailenin family=
parametresini belirtin.
ÃrneÄin, Crimson Pro ve Literata yazı tiplerini istemek için:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Bu HTML dosyasını kopyalayıp bir dosyaya yapıÅtırın:
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata"> <style> body { font-size: 48px; } div:nth-child(1) { font-family: 'Crimson Pro', serif; } div:nth-child(2) { font-family: 'Literataâ, serif; } </style> </head> <body> <div>Making the Web Beautiful!</div> <div>Making the Web Beautiful!</div> </body> </html>
Sayfayı açmak için tarayıcı kullanılarak sayfa önce Crimson Pro'da, sonra da Literata'da "Web'i Güzel Hale Getirme" metni oluÅturulmalıdır.
Eksen aralıkları
DeÄiÅken yazı tipleri, genellikle ek gecikme olmadan sürekli stiller sunar. Bu, duyarlı tasarımla ilgilidir. Bu dinamik yazı tipi, bir sayfada 100 ila 900 arasındaki tüm aÄırlıkları sunarak ve bazı koÅullara göre aÄırlıÄı duyarlı bir Åekilde deÄiÅtirerek sürekli stil aralıkları kullanır.
DeÄiÅken yazı tipi ekseni aralıÄı istemek için 2 deÄeri ..
ile birleÅtirin
Yazı tipleri | İstek |
---|---|
Crimson Pro [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Ä°talik [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold Italic ve [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
AÄırlık gibi bireysel stiller
Stil özellikleri olmadan API, istenen ailenin varsayılan stilini saÄlar. Belirli aÄırlıklar gibi diÄer baÄımsız stilleri istemek için yazı tipi ailesinin adından sonra iki nokta üst üste (:) iÅareti, ardından alfabetik sıralamayla bir eksen özelliÄi anahtar kelimesi, "@" iÅaretinde (@) ve bu eksen özellikleri için bir veya daha fazla deÄer listesi ekleyin.
Bu örneklerde, iÅlem sırasında bunu görebilirsiniz.
Yazı tipleri | İstek |
---|---|
Crimson Pro (varsayılan) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
Crimson Pro Kalın | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
Crimson Pro Normal ve Kalın | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
Crimson Pro Bold ve Bold italik | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts, her bir yazı tipi ailesi için kullanılabilen tüm stilleri listeler.
Varsayılan stil
Ä°stek bir eksen için konum veya aralık belirtmediÄinde varsayılan konum kullanılır. Ä°talik eksenin varsayılan konumu 0 (normal) ve aÄırlık ekseni için varsayılan deÄer 400'dür (normal).
Varsayılan konumu içermeyen eksenlere sahip aileler söz konusu olduÄunda, bu eksenler için konum belirtmeyen istekler baÅarısız olur. ÃrneÄin, 500 ile 900 aralıÄında aÄırlık eksenine sahip bir aile isteÄinde bulunurken aÄırlık konumu belirtilmelidir.
Standart olmayan aÄırlıklar
Statik yazı tiplerinde, aÄırlık stilleri genellikle 100'ün katları olarak belirtilir (ör. 300, 400, 700). DeÄiÅken yazı tipleri hem standart aÄırlıkları hem de ara aÄırlıkları sunar. Bir ara aÄırlık oluÅturmak için:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Gecikme ve dosya boyutu için optimizasyon
KullandıÄınız stiller konusunda net olun. Bu API, istenen stilleri en kompakt yazı tipi grubunda yayınlar. Kullanılmayan stiller istemek, kullanıcılarınızın ihtiyaç duyduklarından daha fazla yazı tipi verisi indirmesine neden olarak daha fazla gecikme yaÅanabilir. Yalnızca 3 belirli aÄırlık kullanıyorsanız bunları isteÄinizde ayrı stiller olarak belirtin. Sürekli bir aÄırlık aralıÄı kullanıyorsanız isteÄinizde bu aÄırlık aralıÄını belirtin.
Yazı tipi görüntüleme özelliÄini kullan
font-display özelliÄi, yazı tipi yüklenirken veya baÅka Åekilde kullanılamazken ne olacaÄını kontrol etmenize olanak tanır. Varsayılan auto
dıÅında bir deÄer belirtmek genellikle uygundur.
display
parametresinde istenen deÄeri geçirin:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Yazı tipi isteklerinizi optimize etme
ÃoÄu zaman, sitenizde veya uygulamanızda bir web yazı tipi kullanmak istediÄinizde, hangi harflere ihtiyaç duyacaÄınızı önceden bilirsiniz. Bu durum genellikle bir logo veya baÅlıkta web yazı tipi kullanıldıÄında meydana gelir.
Bu tür durumlarda, yazı tipi isteÄi URL'nizde text=
deÄeri belirtmeyi deÄerlendirin. Bu, Google Fonts'un, isteÄiniz için optimize edilmiÅ bir yazı tipi dosyası döndürmesine olanak tanır. Bazı durumlarda bu, yazı tipi dosyasının boyutunu %90'a kadar küçültebilir.
Bu özelliÄi kullanmak için API isteÄinize text=
eklemeniz yeterlidir. ÃrneÄin, blog'unuzun baÅlıÄı için yalnızca Inconsolata'yı kullanıyorsanız baÅlıÄı text=
öÄesinin deÄeri olarak yerleÅtirebilirsiniz. Ä°stek aÅaÄıdaki gibi görünür:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Tüm sorgu dizelerinde olduÄu gibi, deÄeri URL olarak kodlamanız gerekir:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Bu özellik, uluslararası yazı tipleri için de kullanılabilir ve UTF-8 karakterlerini belirtmenize olanak tanır. ÃrneÄin ¡Hola! aÅaÄıdaki Åekilde gösterilir:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
"text=" parametresinin yalnızca bir kez belirtilebileceÄini lütfen unutmayın. Ä°stekteki tüm aileler için geçerlidir. Birden fazla ailede farklı metin optimizasyonlarına ihtiyacınız varsa lütfen ayrı API istekleri kullanın.
API URL'leri oluÅturma
Güvenlik
Genel olarak, güncellenmiÅ CSS API'si hangi isteklerin kabul edildiÄi konusunda orijinal CSS API'sinden daha katıdır.
Genel yönergeler:
- Eksenleri alfabetik olarak listele (
en-US
yerel ayar) - Eksen deÄeri grupları (ör. üçlü) sayısal olarak sıralanmalıdır
- Noktalar çakıÅamaz veya dokunulamaz (ör.
wght
400..500 ve 500..600)
API URL Spesifikasyonu
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec
: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name
: Yazı tipi ailesinin adı
axis_tag_list
: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis
: Eksen etiketi, ör. ital
, wdth
, wght
axis_tuple_list
: <axis_tuple>[;<axis_tuple>...]
axis_tuple
: <value>[,<value>...] // Same length as axis_tag_list
value
: <range>
| <float>
range
: <float>..<float>
float
: Ä°lgili eksen aralıÄında bulunan bir deÄer
text
: İstenen yazı tipinde görüntülenecek metin
display
: auto
| block
| swap
| fallback
| optional
Eski tarayıcı desteÄi
DeÄiÅken yazı tipi desteÄi olmayan tarayıcılar, tasarımınızı amaçladıÄınız Åekilde gösteremeyebilir. caiuse öÄesinde tarayıcıların deÄiÅken yazı tipi desteÄini kontrol edin.
Progresif geliÅtirme uygulayarak eski tarayıcılarda beklenmeyen davranıÅlardan kaçınabilirsiniz. DeÄiÅken yazı tipi özelliklerini kapsamak için CSS'nizde @supports
sorgularını kullanın.
Bu örnekte, Markazi Metnin 450 aÄırlıÄını kullanmak istiyoruz, ancak deÄiÅken yazı tipi özellikleri desteklenmediÄinde Normal (aÄırlık 400) veya Aracı (aÄırlık 500) olarak geri dönmesi gerekir:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Markazi+Text:wght@450
CSS isteÄi, deÄiÅken yazı tiplerini destekleyen istemcilere 450 aÄırlık, desteklemeyen yazı tiplerine 400 ve 500 aÄırlıkları gönderir. Genel olarak, isteÄinizin aralıÄıyla ilgili yedekler eski tarayıcılarda kullanılabilir.
Axis | Yedekler |
---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Bu örneklerde, birkaç farklı istek için eski tarayıcılarda hangi stillerin kullanılabileceÄi gösterilmektedir.
İstek | Eski tarayıcılarda kullanılabilen stiller |
---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Kullanılabilir deÄiÅken yazı tipleri
v2 API'sinde kullanabileceÄiniz deÄiÅken yazı tipleri tablosunu burada bulabilirsiniz.
Daha fazla bilgi
- Google Fonts API'nin saÄladıÄı yazı tipi ailelerinin tam listesini Google Fonts'ta bulabilirsiniz.
- Google Fonts API'nin nasıl çalıÅtıÄı hakkında daha fazla bilgiyi Teknik Konular sayfasında bulabilirsiniz.