Video: CSS Font Face Kullanarak Sayfaya Yazı Tipi Ekleme ve Tipografi Özellikleri 2024
Sitenize özel fontlar eklemek için Dreamweaver'ı kullanmanın en kolay yollarından biri Google tarafından sunulmaktadır. Google Web Fonts sınırlı bir font koleksiyonu sunar, ancak tüm fontlarını ücretsiz kullanabilirsiniz. Google Web Fonts sitesindeki fontlardan herhangi birini sayfalarınıza eklemek için aşağıdaki adımları izleyin:
-
Bir web tarayıcısı açın ve Google'ın Web Fontları sitesini ziyaret edin.
-
Aradığınız yazı tipini ve stilini seçerek sitedeki yazı tiplerini arayın.
Aramanızı daraltmak için Filtreler (soldaki sütunda) kullanın. Ekranın üst kısmındaki Metin Önizleme alanını düzenleyerek her yazı tipinde görüntülenen metni değiştirebilirsiniz.
-
Beğendiğiniz bir yazı tipini bulun ve sağ alt köşedeki, her yazı tipi adının hemen altındaki mavi Toplama Ekle düğmesini tıklayın.
-
Web sayfanızda kullanmak istediğiniz yazı tipi stillerinin her birinin yanındaki onay kutularını tıklayın.
Google Yazı Tipi Dizini'ndeki yazı tiplerinin çoğunda yalnızca bir stil bulunur. Tüm stilleri seçmeye cazip gelebilir, ancak yalnızca sizin kullanacağınız stilleri seçmeniz en iyisidir. Google uyarırken, seçtiğiniz font stilleri arttıkça, web sayfanızın indirilmesi daha uzun sürer.
-
Sayfayı aşağı kaydırın ve Latin seçeneğini seçin (İngilizce için).
Başka bir dil için ek karakterlere ihtiyacınız varsa onun yerine Latin Genişletilmiş seçeneğini seçin.
-
Sayfayı, üç sekme ile mavi kutuya kaydırın; yazı tipini web sitenize bağlamak için ilk sekmeyi tıklayın.
Google üç seçenek sunar: Standart, alma ve JavaScript. Üç sitenin ayrıntılı açıklamalarını Google sitesinde bulabilirsiniz.
-
7. Bağlantıyı, bir web sayfasından başka herhangi bir metni veya kodu kopyaladığınız gibi Google'daki Standart sekme alanından kopyalayın.
-
Dreamweaver'da, bağlantıyı açık ve kapalı etiketler arasındaki web sayfanızın baş alanına yapıştırın.
-
Google web Fonts sitesine geri dönün ve sayfanın alt kısmında, font ailesi adını kopyalayın.
Yazı tipi ailesinin adını Yazı Tiplerini CSS Alanınıza Entegrasyon bölümünde bulabilirsiniz.
Stil tanımınızda fontun adının tam olarak Google tarafından yazıldığı gibi eklenmesi gerekir. Yazı tipi adının eşleştiğinden emin olmanın en iyi yolu kopyala yapıştır yöntemidir.
-
Dreamweaver'da, yazı tipi ailesinin adını, yazı tipini kullanmak istediğiniz CSS kuralı içine yapıştırın.
-
Kuralları web sayfanızdaki metne uygulayın.
etiketi gibi bir Etiket seçici stilde yazı tipini kullanırsanız, etiketi metne uyguladığınızda, yazı tipi kuralın bir parçası olarak otomatik olarak uygulanır. Fontu bir sınıf veya kimlik stilinde kullanırsanız, stil, metni çevreleyen,
etiketi veya etiket gibi bir etikete uygulanmalıdır.
-
Sayfayı bir web sunucusuna yayınlayın ve ardından yazı tipini görmek için sayfayı bir web tarayıcısında önizleyin.
Google web Fontları'nı kullandığınızda, Canlı görünüm seçeneğini kullansanız bile Dreamweaver uygulamasında görüntülenen fontu göremeyebilirsiniz. Yazı tipinin sayfanızda çalıştığından emin olmak için, sayfayı FTP kullanarak bir web sunucusuna aktarmanız ve sayfayı çevrimiçi yayınladıktan sonra önizlemeniz gerekebilir.
