Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS API güncellemesi

Google Fonts v2 API güncellemesinde artık değişken yazı tiplerini tam olarak destekliyor. Saat hem tek hem de çok yazı tipi ailelerinin nasıl adlandırılacağını ve eksen aralıklarıdır. Değişken yazı tipleri hakkında daha fazla bilgi edinmek için Etkileşimli olarak resimli broşür David Berlow'dan.

Yenilikler

Her şey yeni bir temel URL ile başlar:

https://fonts.googleapis.com/css2

Her aile içindeki stilleri belirlemeye ilişkin söz dizimi, Değişken yazı tipinde "tasarım alanları".

Hızlı başlangıç kılavuzları

Bu HTML'yi 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>

Dosyayı açmak için bir tarayıcı kullanıldığında, sayfa şu metni oluşturmalıdır: “ Web Güzel" yazıyor.

Web'i Güzelleştirin!

Birden fazla aile

Birden fazla aile istemek üzere her aile için family= parametresini belirtin.

Örneğin, yazı tiplerini Crimson Pro ve Literata:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

Bu HTML'yi 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>

Dosyayı açmak için bir tarayıcı kullanıldığında, sayfa ilk olarak Crimson Pro'da, ardından Literata'da "Making the Web Beautiful" (Web'i Güzelleştirmek) metnini görür.

Web'i Güzelleştirin!

Eksen aralıkları

Değişken yazı tipleri, genellikle ek şablon gerektirmeyen sürekli bir stil yelpazesi sunar. Bu, duyarlı tasarımla ilgilidir. Bu dinamik tipografi, kesintisiz stil aralıklarını kullanır. Böylece, 100 ile 900 arasında ağırlıklarla ve ağırlığı duyarlı bir şekilde değiştirerek değişiklik gösterebilir.

Değişken yazı tipi ekseni aralığı istemek için 2 değeri .. ile birleştirin

Yazı Tipleri	İstek
Kızıl Pro [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
Kızıl Pro İtalik [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
Kızıl Pro Kalın İtalik ve [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

Tarayıcınız değişken yazı tiplerini desteklemiyor (caniuse). Yazı tipi varyasyonlarını destekleyen bir tarayıcıda aşağıdaki metin oluşturulmalıdır Kızıl Pro, 400 ile 500 arasında yumuşak bir ağırlık grubu olarak. CSS animasyonları, metin, etkileşimdeki stili yumuşak bir şekilde değiştiriyor.

Tarayıcınız değişken yazı tiplerini tam olarak destekliyorsa (caniuse), aşağıdaki metin, Crimson Pro'nun yumuşak bir ağırlık kümesi olarak 400 ila 500. CSS animasyonları, metnin etkileşimdeki stili düzgün bir şekilde değiştirmesini sağlayabilir.

Web'i Güzelleştirin!

Ağırlık gibi bağımsız stiller

Stil özellikleri olmadan, API, API'nin varsayılan stilini aile isteğinde bulundu. Belirli ağırlıklar gibi diğer bağımsız stilleri istemek için yazı tipi ailesinin adından sonra iki nokta üst üste (:) ve ardından bir eksen listesi ekleme tesis anahtar kelimeleri alfabetik sırayla, bir kuyruklu a işareti (@) ve bir veya daha fazla liste değer olarak belirir.

Bu örnekler, bunu uygulamalı olarak göstermektedir.

Yazı Tipleri	İstek
Kızıl Pro (varsayılan)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
Kızıl 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`
Kızıl Pro, Kalın ve Kalın İtalik	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

Google Yazı Tipleri, her yazı tipi ailesi için kullanılabilen tüm stilleri listeler.

Varsayılan stil

İstek eksen için bir konum veya aralık belirtmediğinde varsayılan konum kullanılacak. İ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 için, varsayılan konumu içeren istekler eksenler için konumları belirtmezseniz başarısız olur. Örneğin, 500 ile 900 arasında bir ağırlık eksenine sahip aile grubu için, ağırlık konumu belirtiliyor.

Standart olmayan ağırlıklar

Statik yazı tipleriyle, 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 orta ağırlıklar. Ara ağırlık oluşturmak için:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

Tarayıcınız değişken yazı tiplerini desteklemiyor (caniuse). Tarayıcıda destekleyen bir metin kullanıyorsanız, aşağıdaki metin Kızıl olarak görüntülenmelidir: Görsel olarak farklı 400, 450 ve 500 ağırlıklarında profesyonel.

Tarayıcınız değişken yazı tiplerini tam olarak destekliyorsa (caniuse), aşağıdaki metin, Crimson Pro'yu görsel olarak farklı 400 ağırlıklarında oluşturacaktır, 450 ve 500.

Web'i Güzelleştirin!

Gecikme ve dosya boyutu için optimize etme

Kullandığınız stiller konusunda net olun. API, istenen stilleri sunuyor değişiklik yapmanıza olanak tanır. Kullanılmayan stilleri istemek, kullanıcılarınızın daha fazla yazı tipi verisi indirilmesini sağlayarak daha fazla gecikmeye neden oluyor. Yalnızca 3 özel ağırlık varsa bunları isteğinizde ayrı stiller olarak belirtin. Şu durumda: 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'yi kullan

font-display özelliği, yazı tipi yüklenirken ne olacağını kontrol etmenizi veya aksi takdirde kullanılamaz. Varsayılan auto dışında bir değer belirtmek uygun olduğunu belirtmiştim.

display parametresinde istediğiniz değeri iletin:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

Yazı tipi isteklerinizi optimize etme

Sitenizde veya uygulamanızda bir web yazı tipi kullanmak istediğinizde ve hangi harflere ihtiyacınız olacağını önceden bilmeniz gerekir. Bu durum genellikle logo veya başlıkta bir web yazı tipi bulunması.

Bu gibi durumlarda yazı tipinizde bir text= değeri belirtmeniz gerekir. istek URL'si. Bu, Google Fonts'un yazı tipi dosyası için optimize edilmiş talebiniz. Bazı durumlarda bu, yazı tipi dosyasının boyutunu en fazla %90.

Bu özelliği kullanmak için API isteğinize text= eklemeniz yeterlidir. Örneğin, Inconsolata'yı yalnızca blogunuzun başlığı olarak kullanıyorsanız, kendisini text= öğesinin değeri olarak görür. İstek şu şekilde görünür:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Tüm sorgu dizelerinde olduğu gibi değeri de URL olarak kodlamanız gerekir:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

Bu özellik, UTF-8'i belirtmenize olanak tanıyan uluslararası yazı tiplerinde de çalışır karakteri ekleyin. Örneğin, ¡Hola! şu şekilde gösterilir:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

'text=" parametresi yalnızca bir kez belirtilebilir. Geçerli tüm aileler için kullanılabilir. Aşağıdakiler için lütfen ayrı API istekleri kullanın: Aileler genelinde farklı metin optimizasyonları yapabilirsiniz.

API URL'leri oluşturma

Kısıtlama

Genel bir hatırlatma olarak, güncellenen CSS API'nin isteklerin ne olduğu konusunda daha katı olduğunu unutmayın. daha fazla kabul edilir.

Genel kurallar:

Eksenleri alfabetik olarak listele (en-US yerel ayar)
Eksen değer gruplarının (ör. unsurlar) sayısal olarak sıralanması gerekir
Tuples'lar çakışamaz veya dokunamaz (ö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: Karşılık gelen eksen aralığında bulunan bir değer

text: İstenen yazı biçiminde 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çlanır. caniuse'de tarayıcıların değişken yazı tipi desteğini kontrol edin.

Progresif geliştirme yöntemleri uygulayarak, eski tarayıcılarda beklenmeyen davranışlardan kaçınabilirsiniz. @supports hesabını kullan Değişken yazı tipi özelliklerini kontrol etmek için CSS'nizdeki sorgulardır.

Bu örnekte Markazi Metninin 450 ağırlığını kullanmak istiyoruz. değişken ise Normal (ağırlık 400) veya Orta (ağırlık 500) olur yazı tipi özellikleri desteklenmez:

<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, aşağıdakileri destekleyen müşterilere ağırlık 450 gönderir: değişken yazı tipleri ve 400 ve 500 ağırlıkları kullanır. Genel olarak, istek aralığındaki yedekler eski tarayıcılarda kullanılabilir.

Axis	Yedekler
`ital`	0, 1
`wght`	100, 200, 300, 400, 500, 600, 700, 800, 900

Bu örnekler, birkaç gün için eski tarayıcılarda hangi stillerin kullanılabileceğini talep edebilir.

İ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'de kullanılabilen değişken yazı tiplerinin tablosunu burada bulabilirsiniz.

Daha fazla bilgi

Google Fonts API tarafından sağlanan yazı tipi ailelerinin tam listesini Google Fonts.
Google Fonts API'nin şurada işleyiş şekli hakkında daha fazla bilgi edinin: Teknik Konular sayfası.