İyileştirilmiş yazı tipi yedekleri

Özet

Bu makalede, yazı tipi yedeklerinin yanı sıra size-adjust, ascent-override, descent-override ve line-gap-override API'leri ayrıntılı bir şekilde ele alınmaktadır. Bu API'ler, bir web yazı tipinin boyutlarına yakın veya tam olarak eşleşen yedek yazı tipi yüzleri oluşturmak için yerel yazı tiplerinin kullanılmasını mümkün kılar. Bu, yazı tipi değişiminden kaynaklanan düzen kaymalarını azaltır veya ortadan kaldırır.

Bu makaleyi okumayı atlamak isterseniz bu API'leri hemen kullanmaya başlamak için kullanabileceğiniz bazı araçlar şunlardır:

Çerçeve araçları:

• @next/font: Sonraki 13 tarihinden itibaren next/font, eşleşen yazı tipi yedekleri sağlamak için otomatik olarak yazı tipi metriğini geçersiz kılma ve size-adjust özelliğini kullanacak.
• @nuxtjs/fontaine: Nuxt 3'ten itibaren, eşleşen yazı tipi yedeklerini otomatik olarak oluşturmak ve Nuxt uygulamanız tarafından kullanılan stil sayfalarına eklemek için nuxt/fontaine kullanabilirsiniz.

Çerçeve dışındaki araçlar:

• Fontaine: Fontaine, yazı tipi metriği geçersiz kılmalarını kullanan yazı tipi yedeklerini otomatik olarak oluşturan ve ekleyen bir kitaplıktır.
• Bu depo, Google Fonts tarafından barındırılan tüm yazı tipleri için yazı tipi metriğini geçersiz kılma işlemlerini içerir. Bu değerler kopyalanıp stil sayfalarınıza yapıştırılabilir.

Arka plan

Yedek yazı tipi, birincil yazı tipi yüzü henüz yüklenmediğinde veya sayfa içeriğini oluşturmak için gereken glifler eksik olduğunda kullanılan yazı tipi yüzüdür. Örneğin, aşağıdaki CSS, sans-serif yazı tipi ailesinin "Roboto" için yazı tipi yedeği olarak kullanılması gerektiğini belirtir.

font-family: "Roboto" , sans-serif;

Yedek yazı tipleri, metni daha hızlı oluşturmak için (font-display: swap kullanılarak) kullanılabilir. Bunun sonucunda sayfa içeriği daha önce okunabilir ve kullanışlı hale gelir. Ancak eskiden bu durum düzen istikrarsızlığına mal olmuştur: Düzen kaymaları genellikle, yedek yazı tipi web yazı tipiyle değiştirildiğinde meydana gelir. Ancak aşağıda ele alınan yeni API'ler, web yazı tipiyle aynı miktarda yer kaplayan yedek yazı tipi yüzleri oluşturulmasını mümkün kılarak bu sorunu azaltabilir veya ortadan kaldırabilir.

İyileştirilmiş yazı tipi yedekleri

"İyileştirilmiş" yazı tipi yedekleri oluşturmaya yönelik iki olası yaklaşım vardır. Daha basit yaklaşım, yalnızca yazı tipi metriğini geçersiz kılan API'yi kullanır. Daha karmaşık (ancak daha güçlü) yaklaşım, hem yazı tipi metriğini geçersiz kılar hem de API'yi size-adjust kullanır. Bu makalede bu yaklaşımların her ikisi de açıklanmaktadır.

Yazı tipi metriği geçersiz kılmalarının işleyiş şekli

Giriş

Yazı tipi metriği geçersiz kılmaları, bir yazı tipinin yükselişi, inişi ve çizgi aralığını geçersiz kılma imkanı sağlar:

• Tırmanış, bir yazı tipindeki gliflerin referans çizgisinin üzerinde olduğu en uzak mesafeyi ölçer.
• İniş, bir yazı tipindeki gliflerin referans çizgisinin altına indiği en uzak mesafeyi ölçer.
• "Öncü" olarak da adlandırılan çizgi boşluğu, art arda gelen metin satırları arasındaki mesafeyi ölçer.

Yazı tipi metriği geçersiz kılmaları, web yazı tipinin yükselişi, inişi ve çizgi aralığı ile eşleşecek şekilde yedek yazı tipinin yükseliş, iniş ve çizgi aralığını geçersiz kılmak için kullanılabilir. Sonuç olarak, web yazı tipi ve ayarlanan yedek yazı tipi her zaman aynı dikey boyutlara sahip olur.

Yazı tipi metriği geçersiz kılmaları, aşağıdaki gibi bir stil sayfasında kullanılır:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Bu makalenin başında listelenen araçlar, doğru yazı tipi metriği geçersiz kılma değerlerini oluşturabilir. Ancak, bu değerleri kendiniz de hesaplayabilirsiniz.

Yazı tipi metriği geçersiz kılmaları hesaplanıyor

Aşağıdaki denklemler, belirli bir web yazı tipi için yazı tipi metriğini geçersiz kılma işlemlerini sağlar. Yazı tipi metriği geçersiz kılma değerleri, ondalık sayı yerine yüzde olarak (ör. 105%) yazılmalıdır.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Örneğin, Poppin'ler yazı tipi için yazı tipi metriği geçersiz kılmaları şunlardır:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent, descent, line-gap ve unitsPerEm değerlerinin tümü web yazı tipinin meta verilerinden gelir. Bu makalenin bir sonraki bölümünde bu değerlerin nasıl alınacağı açıklanmaktadır.

Yazı tipi tablolarını okuma

Bir yazı tipinin meta verileri (özellikle yazı tipi tabloları), yazı tipi metriği geçersiz kılmalarını hesaplamak için ihtiyaç duyacağınız tüm bilgileri içerir.

Bir yazı tipinin meta verilerini okumak için kullanabileceğiniz bazı araçlar şunlardır:

• fontkit, Node.js için oluşturulmuş bir yazı tipi motorudur. Bu kod snippet'i, yazı tipi metriği geçersiz kılmalarını hesaplamak için fontkit'in nasıl kullanılacağını gösterir.
• Capsize, bir yazı tipi boyutlandırma ve düzen kitaplığıdır. Capsize, çeşitli yazı tipi metrikleri hakkında bilgi edinmek için bir API sunar.
• fontdrop.info, yazı tipi tablolarını ve yazı tipiyle ilgili diğer bilgileri tarayıcıdan görüntülemenize olanak tanıyan bir web sitesidir.
• Font Forge, popüler bir masaüstü yazı tipi düzenleyicidir. ascent, descent ve line-gap sayfalarını görüntülemek için: Font Info iletişim kutusunu açın, OS/2 menüsünü, ardından Metrics sekmesini seçin. UPM sayfasını görüntülemek için: Font Info iletişim kutusunu açın, ardından General menüsünü seçin.

Yazı tipi tablolarını anlama

"Artış" gibi kavramlarda birden çok metrikten bahsedildiğini görebilirsiniz. Örneğin, hheaAscent, typoAscent ve winAscent metrikleri söz konusudur. Bunun nedeni, farklı işletim sistemlerinin yazı tipi oluşturmaya farklı yaklaşımlar benimsemesidir: OSX cihazlardaki programlar genellikle hhea* yazı tipi metriklerini kullanırken Windows cihazlardaki programlar genellikle typo* (sTypo* olarak da adlandırılır) veya win* yazı tipi metriklerini kullanır.

Yazı tipi, tarayıcı ve işletim sistemine bağlı olarak hhea, typo veya win metrikleri kullanılarak oluşturulur.

	Mac	Windows
Chromium	"hhea" tablosundaki metrikleri kullanır.	"USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "win" tablosundaki metrikleri kullanır.
Firefox	"USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "hhea" tablosundaki metrikleri kullanır.	"USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "win" tablosundaki metrikleri kullanır.
Safari	"hhea" tablosundaki metrikleri kullanır.	"USE_TYPO_METRICS" ayarlanmışsa "typo" tablosundaki metrikleri kullanır. Aksi takdirde "win" tablosundaki metrikleri kullanır.

Yazı tipi metriklerinin işletim sistemleri arasında nasıl çalıştığı hakkında daha fazla bilgi için dikey metriklerle ilgili bu makaleye bakın.

Cihazlar arası uyumluluk

Yazı tiplerinin büyük çoğunluğu (örneğin, Google Fonts tarafından barındırılan yazı tiplerinin yaklaşık% 90'ı) yazı tipi metriği geçersiz kılmaları, kullanıcının işletim sistemi bilmeden güvenli bir şekilde kullanılabilir. Başka bir deyişle, bu yazı tipleri için ascent-override, descent-override ve linegap-override değerleri hhea, typo veya win metriklerinin geçerli olup olmadığına bakılmaksızın tamamen aynı kalır. Bu depo, bu işlevin hangi yazı tipleri için geçerli olduğu ve hangilerinin geçerli olmadığı hakkında bilgi sağlar.

OSX ve Windows cihazlar için ayrı yazı tipi metriği geçersiz kılma grupları kullanılmasını gerektiren bir yazı tipi kullanıyorsanız, yazı tipi metriği geçersiz kılma özelliğini ve size-adjust özelliğini yalnızca stil sayfalarınızı kullanıcının işletim sistemine göre değiştirebiliyorsanız kullanmanız önerilir.

Yazı tipi metriği geçersiz kılmalarını kullanma

Yazı tipi metriği geçersiz kılmaları, web yazı tipinin meta verilerinden (yedek yazı tipinden değil) gelen ölçümler kullanılarak hesaplandığından, yedek yazı tipi olarak hangi yazı tipinin kullanıldığına bakılmaksızın aynı kalır. Örneğin:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Boyut düzenlemenin işleyiş şekli

Giriş

size-adjust CSS açıklayıcısı, yazı tipi gliflerinin genişliğini ve yüksekliğini orantılı olarak ölçeklendirir. Örneğin, size-adjust: 200%, yazı tipi gliflerini orijinal boyutlarının iki katına, size-adjust: 50% ise yazı tipi gliflerini orijinal boyutlarının yarısına kadar ölçeklendirir.

Kendi başına size-adjust, yazı tipi yedeklerini iyileştirmek için sınırlı sayıda uygulamaya sahiptir: Çoğu durumda, yedek yazı tipinin bir web yazı tipiyle eşleşmesi için çoğu durumda (orantılı olarak ölçeklenmek yerine) biraz daraltılması veya genişletilmesi gerekir. Ancak size-adjust yazı tipi metriği geçersiz kılma özelliğiyle birlikte kullanılması, herhangi iki yazı tipinin hem yatay hem de dikey olarak birbiriyle eşleşmesini sağlar.

size-adjust, stil sayfalarında şu şekilde kullanılır:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

size-adjust değerinin hesaplanma şekli nedeniyle (sonraki bölümde açıklanmıştır), size-adjust değeri (ve karşılık gelen yazı tipi metriği geçersiz kılmaları), hangi yedek yazı tipinin kullanıldığına bağlı olarak değişir:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Boyut düzenleme ve yazı tipi metriği geçersiz kılmalarını hesaplama

size-adjust ve yazı tipi metriği geçersiz kılma işlemlerini hesaplamaya yönelik denklemler şunlardır:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

Bu girişlerin çoğu (yani çıkış, iniş ve satır aralığı) doğrudan web yazı tipinin meta verilerinden okunabilir. Ancak avgCharacterWidth değerinin yaklaşık olarak ayarlanması gerekir.

Ortalama karakter genişliğine yakın değer

Genel olarak, ortalama karakter genişliği yalnızca yaklaşık olarak tahmin edilebilir ancak bunun tam olarak hesaplanabileceği bazı senaryolar da vardır. Örneğin, tek aralıklı yazı tipi kullanılırken veya bir metin dizesinin içeriği önceden bilindiğinde.

avgCharacterWidth hesaplamasında naif bir yaklaşıma örnek olarak tüm [a-z\s] karakterin ortalama genişliğini kullanabilirsiniz.

Bununla birlikte, tüm karakterlere eşit bir şekilde ağırlık verildiğinde sık kullanılan harflerin (örneğin, e) genişliğinden daha düşük olur ve nadiren kullanılan harflerin (örneğin, z) genişliği fazla olur.

Harf sıklığını dikkate almak ve bunun yerine [a-z\s] karakterin sıklık ağırlıklı ortalama genişliğini hesaplamak, doğruluğu artıran daha karmaşık bir yaklaşımdır. Bu makale, İngilizce metinlerin harf sıklığı ve ortalama kelime uzunluğu için iyi bir referanstır.

Yaklaşım seçme

Bu makalede açıklanan iki yaklaşımın avantajları ve dezavantajları vardır:

• Yazı tipi yedeklerinizi optimize etmeye başlıyorsanız yazı tipi metriği geçersiz kılma işlemlerini tek başına kullanmak iyi bir yaklaşımdır. Bu, iki yaklaşımdan daha basit olsa da, genellikle yazı tipiyle ilgili düzen kaymalarının büyüklüğünü belirgin bir şekilde azaltacak kadar güçlüdür.

• Öte yandan, daha fazla hassasiyet istiyorsanız ve biraz daha fazla çalışma ve test yapmak istiyorsanız size-adjust kullanmak iyi bir yaklaşımdır. Bu yaklaşım doğru uygulandığında yazı tipiyle ilgili düzen kaymalarını etkili bir şekilde ortadan kaldırabilir.

Yedek yazı tiplerini seçme

Bu makalede açıklanan tekniklerde, web yazı tipine en yakın yerel yazı tipini bulmaya çalışmak yerine yaygın olarak kullanılabilen yerel yazı tiplerini dönüştürmek için yazı tipi metriği geçersiz kılmaları ve size-adjust kullanılır. Yerel yazı tiplerini seçerken çok az sayıda yazı tipinin yaygın olarak yerel kullanıma sunulduğunu ve tüm cihazlarda tek bir yazı tipi bulunmayacağını aklınızda bulundurun.

Arial, sans-serif yazı tipleri için önerilen yedek yazı tipidir. Times New Roman ise serif yazı tipleri için önerilen yedek yazı tipidir. Ancak bu yazı tiplerinin hiçbiri Android'de kullanılamaz (Android'deki tek sistem yazı tipi Roboto'dir).

Aşağıdaki örnekte, cihazların daha geniş bir alanda kullanılabilmesi için üç yedek yazı tipi kullanılmaktadır: Windows/Mac cihazları hedefleyen yedek yazı tipi, Android cihazları hedefleyen yedek yazı tipi ve genel bir yazı tipi ailesi kullanan yedek yazı tipi.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Geri bildirim isteği

Yazı tipi metriği geçersiz kılmaları ve size-adjust özelliğini kullanma deneyiminizle ilgili geri bildiriminiz varsa lütfen bize ulaşın.