Her şeyi kendiniz öğrenmek için - kolay değil, ama çok ilginç. Sitenin nasıl çalıştığı hakkında en azından yüzeysel bir fikriniz varsa, o zaman projenizi kendiniz uygulamak onların daha iyidir. Aynı zamanda, sadece bir sürü para tasarrufu yapmayacaksınız, aynı zamanda Google yazı tiplerini kullanarak, genellikle dikkat çekmeyin, ancak bir blog daha ilginç olabileceğine rağmen, genellikle dikkat çekmek için çok fazla "cips", sırrı, vb.
Hizmet
Uzun süredir, internette web fontlarının ana hizmeti ortaya çıktı. Google tarafından geliştirilmiştir. Kullanıcılar ücretsiz kullanabilirler. Bu türün ayarının süper olarak kabul edilmediğine rağmen, hataları yapan ve hizmetle başa çıkamayan bu tür insanlar var.
Bunu yapmak için basit bir tasarım özel olarak tasarlanmıştır. Şimdi Google Fonts'un yazı tipleriyle çalışın kolaylaştı ve ziyaretçi sayısı arttı. Kütüphane genişletildi. Geçen yıl çok toplanan yeni bir hizmet yapıldı olumlu geribildirim. Şimdi insanlar yazı tiplerini sitelerine bağlamak ve onları görüntülemek için daha kolay hale geldi.
Görünüm
Bu nedenle, eski tasarım ile hiç sitede bulunmayanlar için, değişikliklerin genel bir resmini yapmanız gerekir. Geçmişte, hizmet oldukça büyük bir şekilde görünüyordu. Her yerde kalın çerçeveler, mavi mavinin akılda kalıcı düğmeleri vardı, grafikler en yüksek izin değildi. Bütün bunlar ziyaretçiyi önemli ölçüde etkiledi.
Şimdi geliştiriciler malzeme tasarımına odaklandı. Hepsi kazanılmış sofistike özellikler. Görünüm "Kolay" oldu. İnce animasyon, etkileşim farkedilir hale geldi. Başka hiçbir şey, istediğiniz Google Fonts yazı tipinin seçiminden dikkatini dağıtmaz.
Kaynağın altındaki uygun bir adaptasyonu vardı. mobil cihazlar. Tabii ki, böyle bir değişiklik, yeniliklerin arka planına karşı çok dikkat çekmiyor, ancak hataları dikkate alarak önceki versiyon "Manna cenneti" nin avid kullanıcıları için olacak.
Fırsat
Sıkça benzer hizmetler tasarımcılar tarafından kullanılır. Deneyimler ve profesyonelliklerine rağmen, görselleştirme ile de çalışırlar. Yeniden tasarlama, önceden projenizde daha sonra uygulamak için gerekli olacağını önceden birleştirmenize izin verecek daha benzer özellikler sundu.
Bu nedenle, bir fontun farklı bir renkle ve üçüncü arka planla nasıl birleştirildiği sorun, kayboldu. Şirket, deneme yapmasına izin verecek ve belirli bir yazı tipinin belirli bir renkte nasıl görüneceğini öğrenmesine izin verecek, evrensel tonlarla daha fazla araç ve bir paleti ekledi.
Seçilmiş
Google Fontları Yazı Tipleri Servisi, kullanıcılara seçilen seçenekler kullanmasını sağlar. Özel bir sekmesinde, geliştiricinin kullanmanın önerdiği bir dizi stil toplanır. Bu koleksiyonlar diğerleri arasında tahsis edilmiştir. Google ve üçüncü taraf acentelerinden uzmanlar tarafından geliştirilirler. Birçoğunun belirli bir stili ve özel felsefesi var.
Görünüm
Önemli değişikliklerden biri doğrudan font seçimini etkiledi. Kullanıcının daha önce ek düğmelerle bir miktar çizim ve koleksiyona bir font ekleyen büyük bir mavi olduğunu gördüğü anlaşılmaktadır. Genel olarak, bu seçenek iyi görünüyordu, ama her zaman kutu yeterli değildi İyi izni Stilli resimler ve bu nedenle kesinlikle, yazı tipinin nasıl görüneceğini, zordu.
Sorular vardı ve ilk bakışta çok az şey bilinen bu ek düğmeler vardı. Onları onlara getirmek ya da kullanmak gerekliydi. Şimdi az ya da çok netleşti. Ek özellikler var:
- Belirli bir teklif, paragraf veya kendi metin öğenizi seçin.
- Yazı tipi doygunluk deneyleri.
- Bir kaydırıcı kullanarak boyutların hızlı ayarı.
Bu arada, Google fontlarının boyutundaki değişiklik, yalnızca bir örnek olarak değiştirildiği gibi, sayfadaki her şey değil. İÇİNDE eski versiyon Kullanıcılar sayfanın bir kenarından diğerine aktarılabilir ve yeni, sadece düzenlenen örnekte kalırsınız.
Bağ
Bu hizmeti kullanmaya hazırsanız, fontları kaynağınıza bağlamayı deneyebilirsiniz. Bağlantı alma süreci evrenseldir. CMS sisteminize bağlı olarak sorunlar ortaya çıkabilir. Her biri kendi yollarını kullanır. Bu nedenle, farklı projeler için bireysel seçenekleri seçmek zorunda kalacaktır.
Google yazı tiplerini bağlamak için nasıl bir bağlantı elde edeceğiz. Google yazı tiplerinin resmi web sitesine gitmeniz gerekir. Stillerin kataloğunu görüyorsunuz ve en uygun olanı seçiyorsunuz. Bunu yapmak için, yanında "Plusik" a tıklayın. Yazı tipi sayfanın altındaki özel bloğa eklendikten sonra.
Bu birime tıklayın ve ardından yapılandırın. Burada yazıt ve gerekli alfabeyi seçebilirsiniz. Google Fonts Cyrillic'e ihtiyacınız varsa, Kiril ipini işaretleyin. Bağlantı oluşturulduktan sonra. Embed Sekmesindeki aynı pencerede bulunabilir. Sadece kopyalamak ya da tam HTML kodunu kullanmak yeterlidir.
Genellikle site ayarlarında bir yazı tipi ve renkler vardır. Standart seçenekler var ve uzatılmış eklenebilir. Google yazı tipleri için ayrı bir seçeneğe sahipler. Daha sonra Yüce WebFonts eklentisi aracılığıyla fontları indirmeniz gerekir.
Popüler Seçenekler
Tabii ki, özellikle sitenin farklı konularında, hangi stillerin daha iyi olduğunu yargılamak zordur. Sitenizi oluştururken, sizi sevmemesi gerektiğini, ancak izleyicileriniz olduğunu unutmayın. Bu nedenle, rakip sitelere bakmak daha iyidir.
Genellikle ticari kaynaklar için kimse stilleri rahatsız etmeyin. Sonuçta, yazı tipini görürseniz Google Chrome. Çevrimiçi mağazada, ona dikkat etmenin pek mümkün değil. Ancak bir blogunuz varsa, o zaman, büyük olasılıkla, beğenebileceğiniz bir şey, aksine, aksine, rahatsız edecek.
Google Fontları, popüler stillerin bulunduğu birçok koleksiyon hazırladı. Örneğin, ıstakoz metinde bireysel bloklar için kullanmayı sever. Tüm makalenin tamamı bu kadar cesur bir italik olarak yazıldığında okumak zordur. Ama iyi ekler ve tırnak görünüyor.
Kötü komut dosyası da bloglar için bir seçenektir. Müfettak tipi ağır metin dizilerini okumak için ağır, ancak ana fikri tahsis edebilirsiniz. Tarzı el yazısı el yazısını taklit eder. Jura Normal 400, Kiril için ilginç bir seçenektir. Yazar, bunun Sen Sınıflandırma ailesinden Eurostil olduğunu iddia ediyor. Gerçekten çok iyi görünüyor ve çeşitli varyasyonları var.
WebFonts, üçüncü taraf yazı tiplerini web sayfasında kullanma teknolojisidir. Bir örnek:Kaynağa başlarsanız, font etiketi 1995 yılında tanıtıldı ve 1996'da zaten bir yazılım tanımı CSS'ye yazılmıştır. CSS 2.0 sürümünden başlayarak, yazı tipi sentezi tanıtıldı ve tarayıcılar sentezi, ancak yine de hala popüler ve şimdi eski ve alakasız yani, web sitesinde fontların hızlı gelişmesini engelleyen yazı tipi yüklemeye destek vermedi.
İÇİNDE modern internet Web yazı tipleri uzun süredir kurulan bir şeydir. Farklı sitelerde, sırayla belirli bir işletim sisteminin tedarikine dahil edilmediği her türlü yazı tipini kullanabiliriz, ancak bugün hakkında konuşacağız ve konuşacağımız istenmeyen bir yan etki var.
Dosya formatları
Yazı tiplerini bağlamak için, CSS'deki yazılım ekleme kullanılır, sözde @ -evilo. Böylece B. basit biçim @ Font-Face böyle bir bildirimdir. Buna benziyor: / * Yazı Tipi * / @ Font-Face (Yazı Tipi Yüzü: "Yazı Tipi Adı"; SRC: URL ("Yol / Yukarı / It");) / * Uygula * / P (Yazı Tipi Yüzü: "Yazı Tipi Adı" , Arial;)
TTF veya OTF - her zamanki yazı tipi dosyası, ancak Site görüntüleme süresi boyunca sunucudan yüklenir;
WOFF, korumasız bir OTF veya TTF kaynak arşividir, belki de en popüler tarayıcıların desteğinin en önemli formatı ve Woff'taki dosyaların genellikle orijinalinden 2-2.5 kat daha kolaydır;
EOT - Eski tarayıcıları desteklemek için gereken koruma mekanizmalarına sahip olan TT OpenType arşivi tanıttı Internet Explorer. (IE8 ile başlayarak, TrueType eğrileri, desteklenen ve PostScript);
SVG - Safari tarayıcısını desteklemek için.
Uygulama için hazırlanan (@ font-face) Site yazı tiplerine bugün birkaç formatta olmalıdır. Bazı tutarsızlıklar olduğunu, ayrıca bir tür olmadığını da anladın. işletim sistemleri. Yazı tipi formatları oldukça çok, ancak beton yalnızca belirli bir tarayıcıda çalışacaktır. Bu tür formatlara gelince, neden bağlandığında onları çok fazla belirtmek için gereklidir, daha sonra sitenin çapraz tarayıcı desteği için gereklidir.
@ Font-Face (Font-Family: "Ashift_Name"; SRC: URL ("file_name_shift.eot"); SRC: URL ("file_file_shift.eot? #İefix") formatı ("Embedded-OpenType"), URL ("Dosya name_shift .woff ") formatı (" Woff "), URL (" file_shift.ttf ") formatı (" TrueType "), URL (" file_fail_name.svg # dsnoteregular ") formatı (" SVG "); Yazı tipi ağırlığı: normal; Yazı Tipi -Style: Normal;)
Dosya yerine şifreli kodu kullanmak istiyorsanız, bu durumda, Base64, aynı prensipte ve görüntülerle birlikte çalışanlara yardımcı olur, ancak eski IE taban64 için işlenmez.
@ Font-Face (Font-Family: "Ashift_Name"; SRC: URL ("file_name_shift.eot"); @ Font-Face "UTF-8; Base64, Veri) Formatı (" Woff "), URL (Veri: Yazı Tipi / TrueType; charset \u003d utf-8; Base64, veri) formatı ("TrueType"), URL ("file_name_svg #file_shot_name") formatı ("SVG"); Yazı Tipi Ağırlığı: Normal; Yazı Tipi tarzı: Normal;)
Gömülü OpenType?
Bittiğiniz gibi, yani eklentiler için böyle bir parametre ile bir hat vardır:SRC: URL ("File_File_Seot? #İefix") formatı ("Embedded-OpenType")
Klasik versiyonda, bu şekilde sizinle birlikte belirtmek zorunda kaldık:
SRC: URL ("file_shift.eot") formatı ("Embedded-OpenType")
Ama bir sembol eklerken "?" Yazı tipi biçiminden sonra, tarayıcıyı aşağıdaki gösterge biçimini ("Embedded-OpenType") okumayı zorla belirtiriz. Internet Explorer, IE 4.0 sürümüyle başlayarak, sözde şirket gömülü OpenType standardı aracılığıyla fontların gömülmesini destekler. Lisans için geçerli olan fontların önlenmesi için dijital haklar yönetimi yöntemi kullanır.
Yazı tipi tarayıcıda desteklenmiyorsa?
Uzun zaman önce, bypass yolları zaten icat edildi, "koltuk değneği" olarak adlandırılan bir yazı tipi görüntülendi. Yazı tipi yalnızca SVG formatında veya yalnızca TTF formatında tasarlandığında durumlar vardır.1. Eski günlerde, geliştiriciler görüntüyü bağlar, bu da atılan metin görsel editör. Bununla birlikte, şimdi kötü bir ton olarak kabul edilir, çünkü destek öngörülüyor (editörü resmin metnini değiştirmek için tekrar açmanız gerekir), sırasıyla, kullanıcı metni görüntüden kopyalayamaz.
2. Ayrıca ortak çözümlerin kullanımı idi.
3. Başka bir çözüm javascript kullanarakMetni VML (Internet Explorer için) veya SVG (diğer tüm tarayıcılar için) ile değiştirmek için.
Hangi problemler hala ortaya çıkabilir?
Tarayıcı, yazı tipi yüklemeyi senkronize etmeye çalışacaktır, yazı tipi yükleninceye kadar görünmez hale getirmek için metni gizlemeye çalışacaktır. Bu etkinin, "beyaz flaşın" etkisi olan foit denir.Flaş efekti
Safari, Chrome, Opera, Firefox gibi tarayıcılarda etki efekti, bir yazı tipi almayı reddetmeden önce, metni maksimum 30 saniye içinde saklama eğilimindedir, daha sonra varsayılan yazı tipi ayarlanır.Yazı tipinin nasıl yüklendiğine bir örnek:
Bununla birlikte, 2,7 saniye uzun zamandır!
Ne yapılabilir?
Başlangıçta, yaklaşım, yazı tipi dosyasını URIS verilerine dönüştürmek, böylece bu yazı tipleri, CSS dosyasındaki font ailesi tanımlarına doğrudan eklenebilir. Bu CSS dosyasını asenkron şekilde indirerek, tarayıcının, özel yazı tiplerini kullanarak sayfada hemen metin vereceğini garanti edebilirsiniz ve CSS yüklenmez yeni yazı tipleri kullanılacaktır.Ancak, herhangi bir deneyde bir yan etki vardır.
Başlangıçta, Bram Stein özel bir yazı tipi kullandı, ancak yazı tipi yüklendikten sonra, 0,7 saniye örneğinde "Titreşim" meydana geldi:
Kısacası, Titreşim, tarayıcı yazı tipini Yazı Tipi-Falthly'den görüntülemeye çalıştığında ve onu HTML'ye uygulayarak gerçekleşir. Yalnızca yüklenmemiş olan Beyannamenin @ font karşısındaki yazı tipi.
Bram Stein, fontların nasıl doğru şekilde bağlanacağını gösterdi, bir komut dosyası, Google'a bir eşzamansız yazı tipi yükleme için bir alternatif geliştirdi, bu bir fontfaceObServer komut dosyasıdır.
Denemek
Analiz
Google'dan Standart BağlantıDürüst olmak gerekirse, sitede birden fazla yazı tipi kullanarak, siteyi yükleme hızını özellikle yavaşlatabilir, böylece toplam yükleme süresini artırabilirsiniz. Google Fonts API, font jeneratörünü kullanarak siteye hızlı bir yazı tipi eklemenizi sağlar, böylece hızlı bir şekilde web sitenizi tasarlar. Ancak, köpüğün etkisini hatırlamanız gerekir. Toplam Yük Süresi - 322 MS.
Web Font Yükleyici Google'dan
Web Yazı Tipi Yükleyici - API ile gelişmiş çalışma için JavaScript kütüphanesi, bize font yükleme konusunda daha fazla kontrol sağlayan bir kütüphane, standart Google Fonts API'sinden daha fazla kontrol. Komut dosyası, birçok yazı tipini kullanmamızı, bunları sırayla veya eşzamansız olarak yüklememize izin verir. Standart bağlantının aksine, font yükleninceye kadar zayıf bağlantılarda standart yazı tipi ile metin görüntülenir.
Toplam yükleme süresi: 1132 ms
Fontfaceobserver
FontfaceObServer, herhangi bir font web hizmeti ile uyumlu bir önyükleme denilen bir JavaScript kütüphanesi (5KB). Komut dosyası, yazı tipinin yüklenip yüklenmeyeceğini bildirmemize izin verir, indirdikten sonra bir olayı izlemenizi ve yazı tipi yükünü takip etmenizi sağlar. Toplam Yük Süresi: 159 ms
Komut dosyasını kullanarak.
Google Fontları, ücretsiz web fontlarına sahip en iyi kaynaklardan biridir ve Google size web sitenize içe aktarmanın birkaç yolu verir. Ne yazık ki, hiçbiri popüler bir WordPress motoru içermiyor. Bu, çok sayıda eklentiler kullanmanız veya ellerinizi paketlemeniz, kodla yetiştirmeniz gerektiği anlamına gelir.
İyi haber, herhangi bir yazı tipini yükleyebilmenizdir. google kitaplıkları Neredeyse her türlü WordPress konusu. Tam olarak - bugün size öğreteceğiz.
İki seçenek vardır - eklentiyi bağlayın ya da Function.php dosyasıyla bir miktar delin.
Fakat önce, Google Fontlarının avantajlarını ve dezavantajlarını listelemek istiyorum, böylece bunları projelerimizde kullanmaya karar vermeniz için.
İyi ve Kötü Google Web Fontları
Web yazı tiplerine gelince, Google biri daha iyi seçenekler performans açısından . Hafif tasarım ve önbellekleme sistemi nedeniyle. Ziyaretçiler, son zamanlarda kullanıldığı siteyi ziyaret ettilerse, Google yazı tiplerini beklememelidir. Açık SANS gibi popüler yazı tipleri, indirme süresini azaltarak site performansınızı artırabilir.
Başka bir özellik de Google, bu yazı tiplerini yüklemenizi sağlar Böylece onları düzenlerinizde kullanabilirsiniz.
Ve sonunda platform tamamen ücretsiz . Yazı tiplerini kullanmaya başlamak için, yalnızca giriş yapmanız veya başlamanız gerekir. posta kutusu Gmail'de (ve bugün Gmail'e kim posta yok?).
Kusur Bunu belirleyebilirsiniz google-Fonts seçimi küçük Birçoğu birbirlerine benzer. Terbiyeli, orijinal bir yazı tipi bulmak için arama yapmak için çok zaman harcamak gerekir. Kiril için yazı tipleri çok az.
Buna ek olarak, normal güvenlik sorunları - Sitenizdeki Google'dan yazı tiplerini yüklerken bazı kişisel veriler belirlemeniz gerekir.
WordPress Eklentilerini Kullanarak Google Fontları Nasıl Yüklenir
Eklentiler arıyorsanız, arama sonuçlarında ilk gördüğünüz şey - wP Google Yazı Tipleri ve Kolay Google Web Fontları . Bunlar gerçekten en iyi iki eklentidir.
Eklentiler değil İdeal çözüm için kurulum Google- WordPress WebsitesTos sitesini - sadece performans açısından değil, ayrıca eklentiler belirli metin parçalarını seçmenize izin vermez. Bununla birlikte, eğer veya müşteriniz eklentileri kullanmak daha iyi olduğundan emin olsanız, bu iki seçeneğe bakın.
Bu eklenti, H1, paragraflar ve alıntılar gibi belirli elemanlara odaklanmanızı sağlar. Seçilen stillerle daha fazla çalışma için özel bir CSS seçeneği de alırsınız. Google'dan yazı tiplerini bu eklentinizle oldukça kolay bir şekilde ekleyin ve yapılandırın.
Kolay Google Web Fontları adını haklı çıkarır ve yeni başlayanlar için bile Google fontlarının kurulumunu süper kolaylaştırır. Yazı tiplerini görüntülemek, test etmek ve optimize etmek için canlı önizleme özelliğini, web sitesinden çıkmadan, bir kod satırını yazmadan kendi yazı tipi kurallarınızı oluşturabilirsiniz.
WordPress şablonunda Google yazı tiplerini yüklemenin doğru yolu
Sonunda, Function.php dosyasını açma ve bir kodla çalıştırma seçeneğine geliyoruz. Bunu yapmadan önce, Google kütüphanesinden bir yazı tipi seçmeniz gerekir. Örneğin, çok popüler almaya çalışalım Açık sans..
O zaman yazı tipi stilini seçmeniz gerekir - normal, yağlı veya italik. Kendin yapabiliyorsun :)
Stilleri seçtikten sonra, Google size bir snippet kodu verecektir. Bizim gibi görünüyor:
Buna ek olarak, CSS tarzı var:
yazı Tipi ailesi: "Açık Sans", Sans-Serif;
Şimdi Function.php dosyasını açmanın zamanı geldi (dosyanın yolu: WP-Content / Temalar / YourTheme). Dosyanın sonunda yeni bir özellik ekleyin:
fonksiyon load_fonts ()
{
Wp_register_style ("et-googlefonts",
"http://fonts.googleapis.com/csss?family\u003dOpen+ss:300italic.400.500,300"); Wp_enqueue_style ("et-googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");
Bu özelliğin anahtarı, WordPress'in her sayfanın başlığındaki yazı tipi stilleri tablosunu aramasına neden olan "WP_ENQUEUE_STYLE" komutudur. Dikkatlice bakarsanız, Google'ın bize verdiği koddan HREF \u003d ve REL LINK \u003d 'StyleSheet' typext / css '' 'StyleSheet' typext / css 'silmesini görürüz ve herhangi bir eklemek istiyorsanız aynı şeyi yapmanız gerekecek. Wordpress'teki siteniz için diğer Google yazı tipleri.
Şimdi yapmanız gereken tek şey ana CSS dosyasını açmak ve açık sans ile bir stil eklemektir. Burada normal kurallar var, bu nedenle aşağıdaki kodu stil sayfasına ekleyin, kaydet ve güncelle:
vücut.
{
Yazı Tipi: Normal 1EM "Açık Sans", Sans-Serif;
Renk: # 313131;
}
Bu stil sitede çalışacak. Bireysel metin parçalarına başka bir stil ayarlayabilirsiniz:
Kalın yazı
{
Yazı Tipi: Bold 1EM "Açık Sans", Sans-Serif;
}
Gördüğünüz gibi, aslında, her şey çok basit. Sonucu kontrol et ve kontrol et :)
Yeni Web Teknolojileri ve Başlangıçlarına rağmen, yakın zamana kadar zenginlerden yoksunumuz ve güzel web tipografi.
Oldukça geniş bir kulaklık seçimine sahip olsak da, yalnızca çoğu bilgisayar tarafından yüklenen ve desteklenen belirli bir düzeyde farklı yazı tipi kullanabilirdik - bu yazı tipleri olarak biliniyordu - Güvenli Web Yazı Tipleri (Web Güvenli Yazı Tipleri).
Basılı Baskı Evi Karşı Web Tipografi
Tipografi kullanımında geleneksel medyada (gazeteler, dergiler, kitaplar) içerik oluştururken, yalnızca yaratıcı potansiyel sizi sınırlar.
Ancak şimdi, basılı ve sanal taşıyıcılar arasındaki ayrım azalır. Şimdi @ font-face desteği birçok modern tarayıcılar (internet Explorer dahil Sürümden IE4.0.).
Google Font API'ye Giriş
Google Font Directory ve Google Yazı Tipi API, ücretsiz web hizmetleridir. GoogleSite sahipleri, çeşitli yazı tiplerini basit, kullanışlı ve verimli bir şekilde kullanma fırsatı sunar.
Google yazı tipi API - nişin yeni bir temsilcisi olan, Tymkit., TEMPOTHEQUE. ve benzeri.
Öyleyse keşfedilmemiş potansiyele gidelim Google yazı tipi API.
Google yazı tipi API nedir?
İnternette çok seyahat ettiniz, ancak birçok site veya blogda standart olmayan yazı tiplerini gördünüz mü?
Güvenli olmayan standart olmayan yazı tiplerini belirleyelim ( Arial, Helvetica., Verdana., Gürcistan. ve Times New Roman.).
Google yazı tipi API - Bu, tasarımınızda kolayca kullanılabilecek yüksek kaliteli açık (açık kaynaklı) yazı tipleri sağlayan bir web hizmetidir.
Umarız yazı Tipleri Koleksiyonu Büyümeye devam edecek, böylece çeşitli kulaklıklardan oluşan daha fazla seçeneğimiz var.
Google Font API kullanmanın yararları
Hala kullanılmaya karar verirseniz Google yazı tipi API, işte avantajlarından bazıları.
HTML metnini kullanma
Görüntülerin kullanımının aksine veya değiştirmelerinin aksine CSS. Arka plan görüntüsü, @ font-face'ı kullanarak, daha çekici bir web tipografisi için çözüm olarak, plan açısından daha olumlu bir şekilde SEO..
Ek olarak, mevcut içeriği değiştirmeniz gerekmez - yalnızca CSS. Masalar.
Kullanılabilirlik
Kullandığın gibi Html Metin, görüntü veya arka plan değil CSS.Bu, ekrandaki okuma için programları kullanan kişileri etkilemez.
Sunucunuzda güvenilir altyapı ve azaltılmış yük
@ Font yüzünüzü indirmek için güvenilir altyapı kullandığından GoogleYazı tipi dosya servisinin hızla olacağından emin olabilirsiniz ve kendi sunucunuzdaki yükü azaltabilirsiniz.
Google yazı tipi API nasıl kullanılır?
Kullanmak için profesyonel bir web geliştiricisi olmanız gerekmez Google yazı tipi API. Yapmanız gereken tek şey, sayfanıza bir stil sayfası bağlantı öğesi eklemek, bu yazı tipini kullanmaya başlayabilirsiniz. CSS..
İşte genelleştirilmiş bir kullanım süreci Google yazı tipi API:
Adım 1: Seçilen yazı tipi ile stil sayfasına bir bağlantı ekleme
Başlamak için yazı Tipleri Koleksiyonu GoogleHangi fontların kullanım için uygun olduğunu görmek için. İşte belirli bir fontun dahil edilmesi için ana format:
Bir kerelik kullanım için bir yazı tipine ihtiyacınız varsa, bir satırın tarzını beyan edebilirsiniz.
< p style = "Yazı Tipi ailesi:" Yazı Tipi Adı ", Serif"\u003e Altı revizyon güzel< / p > |
Adım 3: Her zaman bir yedek seçeneğiniz var.
Önceki kod parçalarında Serif'i yedek yazı tipi olarak kullandığımız gerçeğine dikkat edemezsiniz. Beklenmeyen sonuçlardan kaçınmak için bu yapılır. Bu, sunucular varsa Google Bir şey yanlış, tarayıcı standart yazı tipini kullanabilir Serif.. Yazı Tipi Yüzü niteliğini kullandığınızda bir alışkanlıkla yapın, @ Font-Face kullanıp kullanmadığınız önemli değil, her zaman ek yazı tipleri belirtin - bu teknolojinin yazı tipi setleri denir.
Google Font API kullanma örneği
Aşağıdaki blok kodunu kopyalayıp yapıştırın Html Belge, kaydet ve sonra tarayıcınızda açın.
Sizinizi test etmeyi öneririz Html Çeşitli tarayıcılarda belge, böylece çapraz tarayıcı farklılıklarını (veya yokluklarını) görebilirsiniz.
Farklı fontlarla deneyebilirsiniz, ancak örneğin ıstakoz kulaklığını kullandık.
< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleapis.com/csss?family\u003dlobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > Altı revizyon güzel!< / h1 > < / body > < / html > |
Sonuç:
Google Font API ile birden fazla yazı tipi kullanma talebi
Diyelim ki üç yazı tipine ihtiyacın var. Google Font Directory.. Birçok istek yapmayın. Birden fazla istek sayıyı arttırır Http. İstekleri. Daha az miktar Http. İstekler Web sayfası yanıt süresini azaltır.
Çok sayıda stil sayfası bağlantı etiketi yerine, bir stil sayfası bağlantı etiketinin HREF özelliği için aşağıdaki formatı kullanın.
Aşağıdaki Örnek Üç Yazı Tipi'ni yükler ( Vollkorn., Yanone. ve Droid sans.) Bir istek kullanarak.
< strong > Vollkorn.< / strong > | < strong > Yanone.< / strong > | < strong > Droid + sans.< / strong > |
Artık bu üç fonttan herhangi birini stillerinizde kullanabilirsiniz.
Neye dikkat etmeli
Kullanarak Ayrı Yazı Tipi İsimleri | boşluksuz. Font'ta + kullanımına dikkat edin Droid sans.. Boşluk yerine Yazı Tipi Adlarında + sembolünü kullanın.
İpucu: De kullanmak Çok sayıda Bir sorgudaki yazı tipleri, sayfanın tepki süresini artırabilir. Sadece gerçekten ihtiyacınız olan bu yazı tiplerini yükleyin. Muhafazakar olmak.
Ağırlık ve Tarz Fontları Yazı Tipleri Yazı Tipi API
Ağırlık yazı tipleri ayrıca çeşitli ağırlık / stil parametreleri vardır. Onları kullanmak için, kolonun Yazı Tipi adına ekleyin (:) ve sonra stil ve ağırlık belirtin.
Aşağıdaki örnekte belirtiyoruz cesur. ve kalın italik için Vollkorn., BEN. İtalik için İncolarolata..
http: //fonts.googleapis.com/csss?family\u003dvollkorn: b.,bi| Inconsolata: bEN.| Droid + sans
Neye dikkat edilmesi gereken
Yazı tipi adından sonra bir boşluk olmadan kolonu (:) kullanın ve ardından stilin adını (yani Bolditalic) veya karşılık gelen Azaltma (yani BI) belirtin. Bir yazı tipinin birçok çeşitlerine ihtiyacınız varsa, onları boşluksuz bir virgülle (,) bölün.
Google yazı tipi API bir web tipografisini daha çekici hale getirir
Web tasarım endüstrisi, eski seçme ve web fontlarını seçme ve kullanma sorunu için bir çözüm arıyor, ve @ font-face bir cevaptır.
Tabii ki, Google Web Fonts fontlarını WordPress sitenizdeki kullanabilmek için farklı eklentiler var, ancak, kendi konusunuzu geliştiriyorsanız, yazıların yanınızda, eklentileri atlamanız gerekir. Aşağıda, Google Web Fontlarını temanıza nasıl kullanacağız.
İlk önce siteye gidelim Google Web Fontları. Ve konuda başvurmamız gereken yazı tipini seçin. Sol tarafta bulunan özel araçların yardımı ile, fontlar gerçekten çok şey olduğundan, arama alanını daraltırabilirsiniz. Başlıklar ve blog isimleri için şişman bir serif yazı tipi olduğumu biliyordum, bu yüzden kategoriler açılır menüsünde Serif'i seçtim ve ardından kalınlık kaydırıcısını (kalınlığı) sağa doğru hareket ettirdim.
Sonuç olarak, bana sorunsuz bir şekilde sunulan 617 seçenek 5'e düştü. Gerçekleştirilecek çok seçeneğiniz var. Ön izleme Yazı Tipleri - Sözcüğün nasıl görüneceğini, teklif, metin paragrafı veya posterde seçilen yazı tipinde nasıl görüneceğini görebilirsiniz. Önceden tanımlanmış bir metin seçebilirsiniz, kendi metninizi belirleyebilirsiniz, istediğiniz yazı tipi boyutunu seçin.
Sitenizde kullanmak istediğiniz yazı tipini bulduktan sonra, koleksiyona ekle düğmesine tıklayın.
Koleksiyonunuza onlarca font ekleyebilirsiniz. Ancak, bu her zaman gerekli değildir. Bunu yapabilirseniz, yapmanız gerektiği anlamına gelmez. Maksimum üç yazı tipi ile kendinizi sınırlamaya çalışın. Ve daha iyi iki tane daha iyi. Nedenleri için, ana metin metni için modası geçmiş bir web güvenli yazı tipi kullanmayı ve başlıklar için web fontlarını ve kendinize özel bir ifade veya dikkat gerektiren diğer unsurlar için tasarlarım. Yazı tiplerinin netliği hakkında commier - ziyaretçileriniz yazılı olanı sökemezse, akılda kalıcı bir yazı tipi kullanmamalısınız.
Yazı tiplerinizi koleksiyona eklediğinizde, onları sitenin altındaki mavi bölümde göreceksiniz. Koleksiyonunuz kullanmak istediğiniz yazı tipleri göründüğünde, kullanım düğmesini tıklamanız yeterlidir.
Bundan sonra, dört adımdan oluşan bir talimatın sunulacağı ekrana gideceksiniz. Bundan yazı tiplerini kullanmayı öğreneceksiniz. Seçili fontları indirmek istiyorsanız, onları değerlendirmek veya ekran görüntüsünün cazip bir ekran görüntüsünü yapmak için bir grafik editörde kullanmak istiyorsanız, konunuz için ekran görüntüsü. O zaman, sayfanın üstündeki İndirme düğmesine tıklamanız yeterlidir. Sadece temanıza yazı tipini kullanmak istiyorsanız, bilgisayarınıza indirmeniz gerekmez.
İlk adımda, stilleri ve eklentinin kalınlığını seçebilirsiniz. İkinci adımda, bağlanmak istediğiniz bir karakter kümesini seçebilirsiniz. Ayrıca, yazı tiplerinizin, sayfa yükleme hızını nasıl yansıtacağını da değerlendirebilirsiniz.
Şimdi, artık önceki kadar basit olmayan üçüncü adıma gidiyoruz. Üçüncü adımda, sitelerimize eklemek için gereken kodu alıyoruz - üç farklı seçenek. Standart seçeneği seçiyoruz - ancak WordPress temalarına stil eklemek için kurulan yöntemleri desteklemek için Google'ın talimatlarından biraz çıkacağız. Standart versiyonun kodunda, yalnızca bağlantı etiketi için HREF özniteliği olarak belirtilen URL'yi kopyalayın.
Ardından fonksiyonlar.php tema dosyasını açın. Konunuzda kullanacağımız CSS'yi indirmek için bir özellik oluşturacağız:
İşlev GGL_LOAD_STYLES () ()
İşlevimden GLGL öneki görün? Bu, başarılı WordPress uygulayıcısından biridir. Konunuzdaki diğer fonksiyonlarla, bir bağlı ortaklık veya eklentilerle çakışma riskini azaltmak için WordPress'teki işlevlerinizin adlarına her zaman bir önek ekleyin.
Şimdi bu fonksiyonda, Google'dan alınan stillerimizi kaydetmemiz gerekiyor:
İşlev GLGL_LOOD_STYLES () (eğer (! IS_ADMIN ()) (WP_Register_Style ("GoogleFont", "http://fonts.googleapis.com/css?family\u003dholtwood+one+Sc|Rouge+Script")))))
WP_Register_Style işlevini kullanıyoruz. İlk argüman bir tanımlayıcıdır, yani. Kodumuzda gelecekteki bu stilist masaya hitap etmek için kullanabileceğimiz bir azalma. İkinci argüman dosyanın yoludur. Google-talimatların üçüncü adımında aldığımız URL'yi kullanıyoruz.
Daha sonra, temel tarz tablosumuzu konunuz için bağlıyoruz. Umarım link etiketini header.php dosyanızın baş bölümüne yerleştirmediniz mi? Eğer öyleyse, dosyaya geri dönün ve bu kodu silin. Sonra fonksiyonlar.php dosyasındaki stil tablosunu takın:
İşlevi GLGL_LOAD_STYLES () (eğer (! ", get_stylesheet_uri (), dizi (" GoogleFont "));))))
WP_ENQUEUE_STYLE işlevini kullanıyoruz. WP_Register_style olarak aynı argümanlara sahiptir. İlk önce bir tanımlayıcıyı stilist masamıza bağlıyoruz. O zaman stil masamıza giderken. Neyse ki, Wordpress'te, GET_STYLESHEET_URI () işlevi aracılığıyla yolu alabilirsiniz. Bundan sonra, bağımlılıkları belirtiriz. Style.css dosyamız Google Web yazı tipleri stil tablosuna bağlıdır.
Son olarak, Fonksiyonumuzu aramak için WP_ENQUEUE_SCRIPTS kancasını kullanıyoruz:
İşlevi GLGL_LOAD_STYLES () (eğer (! ", get_stylesheet_uri (), dizi (" GoogleFont "));))) add_action (" wp_enqueue_scripts "," gl_load_styles ");
Fonksiyonlar.php dosyasıyla bitti. Şimdi seçilen yazı tipini kullanmak için son adımı yapmak için ayrıldık. Dördüncü Adım B. google'ın talimatları Yazı tipimizi kullanmak için font-aile mülküne hangi değerleri geçmemiz gerektiğini gösterir. Tüm başlıklarımı Holtwood One SC ile yapmak istiyorum:
H1, H2, H3, H4, H5, H6 (Yazı Tipi ailesi: "Holtwood One SC", Serif;)
Ve sitenin bir tanımını yapmak istiyorum, bir rouge komut dosyası yazı tipi yapmak istiyorum:
Site-Açıklama (Yazı Tipi ailesi: "Yuvarlak Script", Cursive;)
Her şey! Artık hiçbir şey yapmaz! Google Web Fonts fontlarını WordPress temanıza eklediniz. Onları sorumlu kullanın!
