Yazı Tipi Eşleştirme Gezgini

Yazı Tipi Eşleştirme Gezgini nedir?

Yazı Tipi Eşleştirme Gezgini, yazı tipi kitaplıklarını didik didik etmeden özenli bir başlık-artı-gövde kombinasyonu isteyen web tasarımcıları, geliştiriciler ve içerik üreticileri için tarayıcı içinde çalışan ücretsiz bir araçtır. Bağımsız ve aranabilir iki seçici, 48 seçkin Google Fonts'u serif, sans, display veya mono olarak süzmenize ve her rol için bir yazı tipi seçmenize olanak tanır; rol başına denetimler ise ağırlık, boyut, satır yüksekliği ve harf aralığını ayarlar. Canlı bir önizleme, başlığınızı ve paragrafınızı gerçek yazı tipleriyle işler ve ilhama ihtiyacınız olduğunda karıştır düğmesi rastgele eşleşmeler önerir. Beğendiğinizde, oluşturulan CSS'i tercih ettiğiniz biçimde kopyalayın — bir @import kuralı, bir HTML link etiketi veya Fontsource tarzı npm içe aktarmaları — ve bunu bir açılış sayfasına, blog temasına, slayt destesine veya tasarım sistemine yerleştirin.

Yazı Tipi Eşleştirme Gezgini nasıl kullanılır

1. Başlık seçicisinde serif, sans, display veya mono'ya göre süzün, aramak için yazın ve seçmek için bir yazı tipine tıklayın.
2. Paragraf metni için tamamlayıcı bir yazı tipi seçmek üzere gövde seçicisinde de aynısını yapın.
3. Her rolün ağırlık, boyut, satır yüksekliği ve harf aralığını belirlemek için ayarları açın.
4. Örnek alanına kendi başlığınızı ve bir cümle yazın ya da varsayılan metin için boş bırakın; rastgele eşleşme fikirleri için Karıştır'a basın.
5. Çıktı biçimini seçin — @import, <link> veya Fontsource — ve oluşturulan CSS'i stil sayfanıza veya projenize kopyalayın.

Örnekler

Başlık: Playfair Display 700 · Gövde: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Biçim: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Sıkça sorulan sorular

İki yazı tipini nasıl seçerim?

Her rolün kendi seçicisi vardır. Kataloğu serif, sans, display veya mono'ya göre süzün, aramak için bir aile adının bir kısmını yazın ve seçmek için bir sonuca tıklayın. Başlık ve gövde bağımsız seçilir ve Karıştır düğmesi sizin için rastgele bir çift seçer.

Ağırlık, boyut, satır yüksekliği ve harf aralığını denetleyebilir miyim?

Evet. Başlık ve gövde için ağırlığı, piksel cinsinden boyutu, satır yüksekliğini ve harf aralığını (em cinsinden) ayrı ayrı belirlemek için ayarları açın. Her değişiklik hem canlı önizlemede hem de kopyalanan CSS'te görünür.

Hangi çıktı biçimlerini kopyalayabilirim?

Üç tane: bir CSS @import kuralı, preconnect ipuçları içeren bir HTML <link> etiketi ve Fontsource tarzı npm içe aktarmaları (npm i @fontsource/… ve ağırlık başına içe aktarma satırları). Üçü de h1–h3 ve body için aynı font-family, ağırlık, boyut, satır yüksekliği ve harf aralığı kurallarını içerir.

Yazı tipleri nereden geliyor ve metnim gizli mi?

Bir eşleşme seçtiğinizde tarayıcınız yalnızca bu iki aileyi doğrudan fonts.googleapis.com'daki Google'ın herkese açık Fonts CSS API'sinden yükler — tarayıcınızdan yapılan bir üçüncü taraf isteğidir, sunucularımız üzerinden değil. Örnek metniniz ve ayarlarınız tamamen cihazınızda kalır.

Hangi yazı tipleri dahildir?

Serif, sans-serif, display ve monospace genelinde 48 popüler Google Fonts'tan oluşan özenle seçilmiş bir set — Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono ve daha fazlası dahil.