Her şeyi kendi başınıza öğrenmek kolay değil, çok ilginç. Sitenin nasıl çalıştığına dair en azından yüzeysel bir anlayışa sahipseniz, projenizi uygulamak için bunu kendiniz yapmak daha iyidir. Bunu yaparken, sadece çok para kazanmakla kalmayacak, aynı zamanda birçok "cips", sır vb. öğreneceksiniz. Google yazı tiplerini kullanmak genellikle dikkat çekmez, ancak onlar sayesinde blog çok daha ilginç hale gelebilir.
Hizmet
Oldukça uzun zaman önce, internette büyük bir web yazı tipi hizmeti ortaya çıktı. Google tarafından geliştirilmiştir. Kullanıcılar ücretsiz olarak kullanabilir. Bu tür bir kurulumun çok zor olmadığı düşünülse de, hala hata yapan ve hizmetle baş edemeyen insanlar vardı.
Bunun için özel olarak basit bir tasarım geliştirildi. Google Fonts ile çalışmak artık daha kolay ve daha fazla ziyaretçi. Kütüphane de genişledi. Geçen yıl, birçok olumlu eleştiri alan hizmetin yeniden tasarımı gerçekleşti. İnsanların sitelerine bağlanması ve yazı tiplerine göz atması artık daha kolay.
Görünüm
Bu nedenle, eski tasarıma sahip siteye hiç gitmemiş olanlar için, değişikliklerin genel bir resmini elde etmeniz gerekir. Hizmet geçmişte oldukça büyük görünüyordu. Her yerde kalın çerçeveler, akılda kalıcı mavi düğmeler vardı, grafikler en yüksek çözünürlükte değildi. Bütün bunlar ziyaretçiyi büyük ölçüde etkiledi.
Şimdi geliştiriciler Materyal Tasarımına odaklandı. Her şey gelişmiş özellikler kazanmıştır. Görünüm "daha hafif" hale geldi. İnce animasyon ve etkileşim fark edilir hale geldi. Artık hiçbir şey dikkati doğru Google Yazı Tiplerini seçmekten alıkoyamaz.
Kaynağın mobil cihazlar için uygun bir uyarlaması ortaya çıktı. Tabii ki, böyle bir değişiklik, yeniliklerin arka planına karşı çok belirgin değil, ancak önceki sürümün hataları göz önüne alındığında, hevesli kullanıcılar için "göksel manna" olacak.
Fırsat
Tasarımcılar genellikle bu hizmeti kullanır. Deneyimlerine ve profesyonelliklerine rağmen görselleştirme ile de çalışırlar. Yeniden tasarım, projenizde daha sonra uygulanması gerekenleri önceden birleştirmenize olanak tanıyan bu özelliklerden daha fazlasını sundu.
Bu nedenle, bir yazı tipinin başka bir renkle nasıl birleştirildiği ve üçüncü bir arka planla ilgili sorun ortadan kalktı. Şirket, siteye daha fazla araç ve evrensel tonlara sahip bir palet ekledi; bu, belirli bir yazı tipinin belirli bir renkte nasıl görüneceğini denemelerine ve bulmalarına olanak tanıyacak.
Favoriler
Google Yazı Tipleri hizmeti, kullanıcılara favorilerinden bir seçim sunar. Özel bir sekme, geliştiricinin kullanım için önerdiği bir dizi stil içerir. Bu koleksiyonlar diğerlerinden ayrılıyor. Google ve üçüncü taraf ajanslardan uzmanlar tarafından geliştirilmiştir. Çoğunun belirli bir tarzı ve felsefesi var.
Görünüm
Önemli değişikliklerden biri yazı tipi seçimini doğrudan etkiledi. Bu, kullanıcının daha önce önünde, yazı tipini koleksiyona ekleyen ek düğmeler ve büyük bir mavi ile belirli bir çizim gördüğü anlamına gelir. Genel olarak, bu seçenek iyi görünüyordu, ancak kutu her zaman stil ile resmin yeterince iyi bir çözünürlüğüne sahip değildi ve bu nedenle yazı tipinin nasıl görüneceğini açık bir şekilde belirlemek zordu.
İlk bakışta hakkında pek az şey bilinen bu ek düğmeler hakkında da sorular vardı. Onları yönlendirmek ya da kullanmak gerekiyordu. Şimdi her şey az çok netleşti. Ek özellikler ortaya çıktı:
- Belirli bir cümle, paragraf veya kendi metin öğenizi seçin.
- Yazı tipi ağırlıkları ile deneyler.
- Kaydırıcıyı kullanarak hızlı boyut ayarı.
Bu arada, Google yazı tipini yeniden boyutlandırma, sayfadaki her şey değil, yalnızca bir örnek değiştiği için artık daha duyarlı. Eski sürümde, kullanıcılar sayfanın bir tarafından diğerine geçebilirdi, ancak yeni sürümde, sadece ayarladığınız örnekte kalırsınız.
Bağlantı
Bu hizmeti kullanmaya hazırsanız, yazı tiplerini kaynağınıza bağlamayı deneyebilirsiniz. Bir bağlantı alma süreci evrenseldir. CMS sisteminize bağlı olarak sorunlar ortaya çıkabilir. Her biri kendi yöntemlerini kullanır. Bu nedenle, farklı projeler için ayrı seçenekler seçmeniz gerekecektir.
Google yazı tiplerini bağlamak için bir bağlantının nasıl alınacağına bakacağız. Google Fonts resmi sitesine gitmeniz gerekiyor. Orada stil kataloğuna göz atabilir ve ihtiyaçlarınıza en uygun olanı seçebilirsiniz. Bunu yapmak için yanındaki artı işaretine tıklayın. Bundan sonra yazı tipi, sayfanın en altındaki özel bir bloğa eklenecektir.
Bu bloğa tıklayın ve daha da özelleştirin. Burada stilleri ve istediğiniz alfabeyi seçebilirsiniz. Google Kiril yazı tiplerine ihtiyacınız varsa, Kiril satırını kontrol edin. Bundan sonra, bir bağlantı oluşturulacaktır. Aynı pencerede Göm sekmesinde bulunabilir. Bunu kopyalamanız veya tam HTML kodunu kullanmanız yeterlidir.
Genellikle site ayarlarında yazı tipleri ve renkler için bir ayar vardır. Standart seçenekler var, ancak gelişmiş olanları ekleyebilirsiniz. Google Yazı Tipleri için ayrı bir seçenek içerirler. Sizinki ise Supreme Google Webfonts eklentisi aracılığıyla yazı tiplerini indirmeniz gerekiyorsa.
Popüler seçenekler
Özellikle farklı site temaları için hangi stillerin en iyi olduğuna karar vermek elbette zor. Web sitenizi oluştururken, onu sevmemeniz gerektiğini değil, hedef kitlenizi unutmayın. Bu nedenle, rakip sitelere daha yakından bakmak daha iyidir.
Genellikle ticari kaynaklar için kimse stiller hakkında endişelenmez. Sonuçta, bir çevrimiçi mağazada Google Chrome'da bir yazı tipi görürseniz, üzerinde durmanız pek olası değildir. Ancak önünüzde bir blog varsa, büyük olasılıkla bir şeyden hoşlanabilirsiniz, ancak tam tersine bir şey can sıkıcı olacaktır.
Google Fonts, popüler stilleri de içeren birçok koleksiyon hazırlamıştır. Örneğin, Istakoz, metindeki tek tek bloklar için kullanılır. Makalenin tamamı böyle kalın italik harflerle yazılmışsa okumak zor. Ancak ekler ve alıntılar iyi görünüyor.
Bad Script ayrıca blog yazmak için bir seçenektir. İtalik yazı tipi büyük metin dizilerini okumak zordur, ancak ana fikri vurgulayabilirler. Stil el yazısını taklit eder. Jura normal 400, Kiril alfabesinin ilginç bir çeşididir. Yazar bunun Sans-Serif ailesinden bir Eurostyle olduğunu iddia ediyor. Gerçekten iyi görünüyor ve çeşitli varyasyonları var.
Bu bölümün ilk kısmı, CSS yazı tiplerine bir girişe ayrılmıştır. Bu sayfada, CSS'ye yazı tiplerinin nasıl dahil edileceğini, web yazı tiplerinin neler olduğunu ve bunlarla nasıl çalışılacağını, orada hangi yazı tipi biçimlerinin bulunduğunu ve Google Yazı Tiplerinin nasıl kullanılacağını öğreneceksiniz. İlk olarak, bir CSS yazı tipini bağlamanın kolay bir örneğine bakalım:
P (yazı tipi ailesi: Verdana;)
Bu küçük kod parçası, tüm etiketlerin
Yazı tipi Verdana'dır. font-family özelliği, hangi fontun veya font ailesinin kullanılacağını belirtir. Bu stilin kullanıcının tarayıcısında doğru görüntülenmesi, belirtilen yazı tipinin bilgisayarında yüklü olup olmamasına bağlıdır. Bizim durumumuzda, kullanıcının bilgisayarında Verdana yazı tipi yoksa, tarayıcı varsayılan yazı tipini gösterecektir.
Bir zamanlar, tasarımcılar, kullanıcının bilgisayarında ana yazı tipinin eksik olması durumunda ek olarak birkaç yedek yazı tipi belirtmek zorunda kaldılar. Metne Verdana yazı tipiyle stil vermek istediğinizi ve yedek olarak Trebuchet MS, Geneva yazı tiplerini ve herhangi bir sans-serif yazı tipini yüklemek istediğinizi varsayalım. Bu şekilde yazılır:
P (yazı tipi ailesi: Verdana, "Trebuchet MS", Geneva, sans-serif;)
Bu kodu işlerken, tarayıcı önce kullanıcının bilgisayarında Verdana yazı tipinin olup olmadığını kontrol edecektir. Yazı tipi mevcutsa, etiketlerin içeriği
Bu yazı tipinde görüntülenir. Yazı tipi eksikse, tarayıcı listedeki bir sonraki yazı tipini kontrol eder - Trebuchet MS. Bu yazı tipi yoksa, bir sonraki yazı tipi kontrol edilir - Cenevre. Kullanıcının bilgisayarında Geneva yoksa, tarayıcı uygun başka bir sans-serif yazı tipi seçer ve onunla birlikte metni görüntüler.
Not: kodda Trebuchet MS yazı tipinin adını tırnak içinde yazdık. Yazı tipinin adının boşluk içerdiği durumlarda çift veya tek tırnak içine alınması gerekir.
Vikipedi sayfasında serif ve sans-serif yazı tipinin ne olduğunu okuyabilirsiniz.
Web yazı tipleri
Yazı tiplerini kullanmanın yukarıdaki yolunun çok büyük bir dezavantajı vardır - yazı tipi sayısında sınırlısınız. Yalnızca çoğu bilgisayarda yüklü olan seçeneklerle yetinmek zorunda kalacaksınız.
Sayfa tasarımını özgün kılmak, özgünlük katmak için yazı tipi seçimini nasıl artırabilirsiniz? Web yazı tipleri kurtarmaya gelir. Onlarla nasıl çalışılacağını öğrenmek için ilgili bölümü okuyun.
Bu nedenle, kullanıcının tarayıcısında istenen yazı tipini görüntülemek için, bu yazı tipinin bilgisayarına indirilmesine ihtiyacımız var. Bunu başarmak oldukça kolaydır. Yazı tiplerini CSS'ye bağlamanın bu yöntemi, tasarımcılar için gerçekten harika fırsatlar sunuyor. Ancak merhemdeki sinekten bahsetmeye değer: ilk olarak, her tarayıcı belirli bir yazı tipi biçimini desteklemez (bu, yazı tipinin görüntülenmemesine neden olur) ve ikincisi, yazı tipine sahip dosyanın çok fazla ağırlığı varsa, yavaşlayabilir sayfa yükleniyor.
Biçim desteği
Dosya biçimi uyumsuzluğu sorunuyla nasıl başa çıkılır? En popüler yazı tipi biçimlerini gösteren tabloya bir göz atalım ve hangi tarayıcıların bunları desteklediğini görelim:
Not: Yazı tipi formatı desteğiyle ilgili en son bilgileri caniuse.com adresinde her zaman bulabilirsiniz. Arama çubuğuna biçimin adını girmelisiniz (örneğin, ttf).
Modern tarayıcıları hedefliyorsanız, yalnızca en yaygın ve kullanılan TTF yazı tipi biçimini kullanmalısınız. Bir yazı tipinin birkaç biçimine sahip olmanız gerektiğinde, bir biçimden diğerine özel çevrimiçi dönüştürücüler kullanabilir ve ardından tüm dosyaları tek tek bağlayabilirsiniz. Böylece tarayıcı, çalıştığı yazı tipi biçimini seçebilecektir.
@ font-face kullanarak bir web fontu dahil etme
TTF formatında MyUniqueFont adında kendi benzersiz yazı tipiniz olduğunu ve web sayfanızın ana metninin bu yazı tipinde görüntülenmesini istediğinizi varsayalım. Yapılacak ilk şey, yazı tipi dosyasını diğer tüm site dosyalarının bulunduğu klasöre kopyalamaktır. Dağınıklığı önlemek için, özellikle yazı tipleri için, örneğin yazı tipleri olarak adlandırılan ayrı bir klasör oluşturabilirsiniz.
@ font-face (font ailesi: MyUniqueFont; src: url ("fontlar / MyUniqueFont.ttf");)
font-family özelliği bu durumda farklı bir rol oynar: onunla fonta bir ad atarız, böylece stili yazarken bu adı kullanabiliriz:
P (yazı tipi ailesi: MyUniqueFont;)
İkinci satır, yazı tipi dosyasının yolunu içerir. Örneğimizde, MyUniqueFont.ttf dosyası fontlar klasöründe bulunmaktadır. URL'niz farklı olabilir.
Google yazı tipleri
Google, Google Yazı Tipleri koleksiyonundan herhangi bir yazı tipini bağlamayı kolaylaştırır. Beğendiğiniz fontu kullanmaya başlamak için tek yapmanız gereken Google'da font sayfasında birkaç ayar belirtmek ve ardından bu fontun özel bağlantısını kopyalayıp web dökümanınıza eklemek.
Not: Google'ın tüm yazı tipi koleksiyonu sitede mevcuttur Google yazı tipleri... Sayfada, yazı tiplerini kategoriye, kalınlığa, alfabeye göre aramak için çeşitli filtreler kullanabilirsiniz.
Aşağıda, Google'dan bir yazı tipi bağlamanın her adımını açıklayacağız. Bunun neyle ilgili olduğunu anlamak için Google Yazı Tipleri sayfasından herhangi bir yazı tipi seçin ve Hızlı kullanım düğmesine tıklayarak açın.
Adım 1: bir yüz seçin
Her şeyden önce, stili için seçenekler, seçilen yazı tipinin sayfasında ve yazı tipi yükleme hızından başka bir şey ifade etmeyen hız göstergesi simgesinde görüntülenecektir. Bir yazı tipi için ne kadar çok stil seçerseniz, onu indirmek o kadar uzun sürer. Bu nedenle, yalnızca kullanmayı planladığınız yazı tipi seçeneklerini seçmeniz önerilir.
Adım 2: bir alfabe seçin
Sayfada ayrıca bir dizi karakter seçmek mümkündür: Latince, Kiril, vb. Yazı tipine bağlı olarak, tüm alfabe çeşitleri mevcut olmayabilir. Önceki noktaya benzer şekilde, yalnızca ihtiyacınız olan alfabenin önüne bir onay işareti koymak daha iyidir.
3. Adım: Kodu siteye ekleyin
İlk yöntem, yazı tipinin indirildiği HTML kodunda Google sunucusuna bir bağlantı eklemeyi içerir. Hazır kod parçasını kopyalayıp etiketlerin arasına yerleştirmeniz gerekir.
HTML belgenizde. Örnek:...
İkinci yol, yazı tipini @import yönergesini kullanarak bağlamaktır. Bitmiş kod, seçilen Google yazı tipinin sayfasındaki 3. noktanın ikinci sekmesindedir. Stil sayfanızın en başına eklenmesi gerekir (aksi takdirde dosya içe aktarılmaz). Kod şöyle görünür:
@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,kiril);
İlk yöntemin özelliği, kullanmayı planladığınız her sayfanın başlığına yazı tipine bir bağlantı eklemeniz gerektiğidir. Bu, az sayıda sayfaya sahip sitelerde yapmak kolaydır, ancak büyük kaynaklar için sorunludur. İkinci yöntem uygundur, çünkü kod harici stil sayfasının en başına yerleştirilebilir ve daha sonra bu tablonun bağlı olduğu tüm sayfalar @import yönergesi kullanılarak yüklenecek olan gerekli yazı tipini alacaktır.
Adım 4: stili oluşturun
Önceki adımları tamamladıktan sonra yazı tipini uygulamaya başlayabilirsiniz. Böyle bir CSS kuralının nasıl yazıldığını daha önce gördünüz:
P (yazı tipi ailesi: "Roboto", sans-serif;)
İlk adımda stil için birkaç seçenek seçtiyseniz (örneğin, Kalın 700 tipinin bir türevini eklediyseniz), üçüncü adımda kod biraz değiştirilecektir:
@import url (http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,kiril);
Daha sonra yazı tipini kalın yapmak için CSS stilini şu şekilde yazın:
P (yazı tipi ailesi: "Roboto", sans-serif; yazı tipi ağırlığı: 700;)
Not: Google Fonts, yazı tipi ağırlığını belirtmek için yalnızca 100 ile 900 arasındaki geleneksel birimleri kullanır. Örneğin, normal stil (varsayılan olarak) 400'e (normal) eşittir ve standart kalın, 700'e (kalın) eşittir.
Google Fonts hizmetinin başlıca avantajları şunlardır:
- kullanım kolaylığı (yeni başlayanlar bile hizmeti anlayabilir ve gerekli tüm kod otomatik olarak oluşturulur - sadece kopyalamanız gerekir);
- yazı tiplerinin mevcudiyeti (onlar için ödeme yapmaya gerek yoktur);
- kullanılan tüm yazı tipi biçimleri sağlanır (bu, her tarayıcının tam olarak çalıştığı yazı tipi biçimini indirebileceği anlamına gelir).
Hizmetin dezavantajları arasında çok çeşitli yazı tipleri, özellikle Kiril yazı tipleri yoktur. Bu arada, İnternette başka benzer hizmetler de var, örneğin TypeKit (ücretli).
sonuçlar
Bugün orijinal ve standart olmayan yazı tiplerini web sayfalarına bağlamak için birkaç seçeneğimiz var. Bu yöntemlerin her birinin kendi artıları ve eksileri vardır. Seçeneklerden hangisini kullanmak daha iyidir, kendiniz belirlemeniz gerekir. Bu genellikle duruma bağlıdır ve farklı durumlarda farklı yaklaşımlar yararlı olabilir. Bu noktada, CSS'de yazı tiplerini nasıl kullanacağınızı bilmeniz yeterlidir.
Google Fonts, ücretsiz web fontları için en iyi kaynaklardan biridir ve Google, bunları web sitenize aktarmanız için size birkaç yol sunar. Ne yazık ki, hiçbiri popüler WordPress motorunu içermiyor. Bu, ya çok sayıda olan eklentileri kullanmanız ya da kodla uğraşarak ellerinizi kirletmeniz gerektiği anlamına gelir.
İyi haber şu ki, Google kitaplığındaki herhangi bir yazı tipini neredeyse tüm WordPress temalarına çok fazla uğraşmadan yükleyebilirsiniz. Tam olarak nasıl - bugün size öğreteceğiz.
İki seçenek vardır - eklentiyi bağlayın veya function.php dosyasıyla biraz uğraşın.
Ama önce, Google Fonts'un avantajlarını ve dezavantajlarını listelemek istiyorum, böylece projelerinizde kullanıp kullanmamaya karar verebilirsiniz.
İyi ve Kötü Google Web Yazı Tipleri
Web yazı tipleri söz konusu olduğunda, Google en iyi seçeneklerden biridir. performans açısından ... Hepsi hafif yapı ve önbelleğe alma sistemi sayesinde. Ziyaretçilerin, onları kullanan bir siteyi yakın zamanda ziyaret etmişlerse, Google Fonts'un yüklenmesini beklemeleri gerekmez. Open Sans gibi popüler yazı tipleri, yükleme sürelerini azaltarak sitenizin performansını iyileştirebilir.
Diğer bir özelliği ise Google bu yazı tiplerini indirmenize izin veriyor böylece onları düzenlerinizde kullanabilirsiniz.
Ve sonunda platform tamamen ücretsizdir ... Yazı tiplerini kullanmaya başlamak için, Gmail'de oturum açmanız veya bir posta kutusu oluşturmanız yeterlidir (ve bugün Gmail'de kimlerin postası yoktur?).
eksikliklerin bunu belirtebilirsin google yazı tipi seçimi küçük , birçoğu birbirine benziyor. İyi, orijinal bir yazı tipi bulmak için çok fazla arama yapmak gerekir. Çok az sayıda Kiril yazı tipi vardır.
Ek olarak, olağan güvenlik endişeleri - Google'dan yazı tiplerini sitenize yüklerken bazı kişisel bilgilerinizi vermeniz gerekiyor.
WordPress eklentilerini kullanarak google yazı tipleri nasıl kurulur
Eklentileri ararsanız, arama sonuçlarında gördüğünüz ilk şey WP Google Yazı Tipleri ve Kolay Google Web Yazı Tipleri eklentileri ... Bunlar gerçekten en iyi iki eklenti.
Eklentiler, bir WordPress sitesine Google Yazı Tiplerini yüklemek için ideal bir çözüm değildir - yalnızca performans açısından değil, aynı zamanda eklentiler belirli metin parçalarını seçmenize izin vermediği için. Bununla birlikte, siz veya müşteriniz eklentileri kullanmanın daha iyi olduğuna ikna olduysanız, bu iki seçeneğe bir göz atın.
Bu eklenti, H1 başlıkları, paragraflar ve alıntılar gibi belirli öğeleri hedeflemenize olanak tanır. Ayrıca, belirli yazı tiplerini daha fazla şekillendirmek için özel bir CSS seçeneğine de sahip olursunuz. Bu eklenti ile WordPress sitenize Google yazı tiplerini eklemek ve özelleştirmek oldukça kolaydır.
Easy Google Web Fonts, adının hakkını verir ve yeni başlayanlar için bile Google Fonts'u yüklemeyi çok kolaylaştırır. Web sitesinden ayrılmadan yazı tiplerini önizlemek, test etmek ve optimize etmek için Canlı Önizleme özelliğini kullanabilir ve bir satır kod yazmadan kendi yazı tipi kurallarınızı oluşturabilirsiniz.
Google Yazı Tiplerini bir WordPress şablonuna kurmanın doğru yolu
Sonunda, function.php dosyasını açma ve biraz kod yapma seçeneğine ulaşıyoruz. Bunu yapmadan önce, Google kitaplığından bir yazı tipi seçmeniz gerekir. Örneğin, çok popüler olanı almaya çalışalım. Açık sans.
Ardından bir yazı tipi stili seçmeniz gerekir - normal, kalın veya italik. Kendin yapabilirsin :)
Stilleri seçtikten sonra Google size bir kod parçacığı verecektir. Bizimki şuna benziyor:
Ek olarak, CSS stiline sahibiz:
yazı tipi ailesi: "Açık Sans", sans-serif;
Şimdi function.php dosyanızı açmanın zamanı geldi (dosya yolu: wp-content / theme / yourtheme). Dosyanın sonuna yeni bir işlev ekleyin:
işlev load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italik,400italik,700italik,400,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");
Bu işlevin anahtarı, WordPress'i her sayfanın başlığında yazı tipi stil sayfalarını çağırmaya zorlayan "wp_enqueue_style" komutudur. Yakından bakarsanız, Google'ın bize verdiği koddan href = ve rel = 'stylesheet' type'text / css' bağlantısını kaldırdığımızı göreceksiniz ve başka bir Google eklemek istiyorsanız aynısını yapmanız gerekecek. WordPress siteniz için yazı tipi.
Şimdi tek yapmanız gereken ana CSS dosyasını açmak ve stili Open Sans'tan yapıştırmak. Genel kurallar burada çalışır, bu nedenle stil sayfanıza aşağıdaki kodu ekleyin, kaydedin ve güncelleyin:
vücut
{
yazı tipi: normal 1em "Açık Sans", sans-serif;
renk: # 313131;
}
Bu stil site genelinde çalışacaktır. Tek tek metin parçaları için farklı bir stil ayarlayabilirsiniz:
Kalın yazı
{
yazı tipi: kalın 1em "Açık Sans", sans-serif;
}
Gördüğünüz gibi, aslında çok basit. Deneyin ve sonucu kontrol edin :)
Vlad Merjeviç
Yazı tipi, web tasarımının ayrılmaz bir parçasıdır, siteye ifade ve tanınırlık kazandırır, sitenin karakteristik stilini ifade eder ve metinlerin algılanmasıyla doğrudan ilişkilidir. İyi seçilmiş bir yazı tipi fark edilmeyebilir, ancak onsuz web sitesi tasarımını tamamlayan hiçbir lezzet olmaz.
Bilgisayarınızda zaten belirli bir yazı tipi yüklüyse, stillerde bir satır eklemek yeterlidir.
h1 (yazı tipi ailesi: SuperPuperFont;)
Font-family özellik değeri, yazı tipinin adıdır, tüm başlıklara uygulanacaktır.
... Ancak, muhteşem ve nadir bulunan yazı tipimizi yüklememişlerse, web sitesi ziyaretçileri ne görecek? Bu durum büyük olasılıkla, bu nedenle tarayıcı belirtilen yazı tipini tanımıyorsa, varsayılan yazı tipini kullanacaktır, örneğin Windows'ta Times New Roman'dır. Dikkatlice düşünülmüş tasarımlarımızın tümü bir gecede parçalanacak, bu yüzden en çok yönlü çözümü aramamız gerekiyor. Hemen akla gelen ilk şey, font dosyasının kullanıcının bilgisayarına indirilmesini organize etmek ve metni seçilen fontta görüntülemektir. Bir resim aracılığıyla metin görüntüleme gibi diğer yöntemlerle karşılaştırıldığında, bu yöntem en basit ve çok yönlüdür.
Bir yazı tipi dosyasını indirip ardından CSS aracılığıyla uygulamanın avantajları nelerdir?
- Metin eklemek ve düzenlemek kolaydır.
- Tarayıcıda, aramayı kullanabilir ve istediğiniz ifadeleri bulabilirsiniz.
- Tarayıcı ayarlarında, rahat bir görüntüleme elde etmek için yazı tipi boyutunu küçültebilir veya artırabilirsiniz.
- Arama motorları belge içeriğini iyi indeksler.
- Metin seçilebilir ve panoya kopyalanabilir, ayrıca başka bir dile çevrilebilir.
- Satır aralığı, renk, boyut ve benzerleri gibi metin parametrelerinin CSS özellikleri kullanılarak değiştirilmesi kolaydır.
- Yine, CSS aracılığıyla metne, örneğin bir gölge gibi farklı efektler ekleyebilirsiniz.
Gördüğünüz gibi, birçok avantajı var. Bazı küçük dezavantajlar var ve denge için bahsetmeye değer.
- Tüm tarayıcı sürümleri indirilebilir yazı tipini ve herkes için aynı formatı desteklemez.
- Yazı tipini içeren dosya büyük olabilir, bu da web sayfasının yüklenmesini yavaşlatır.
Tablo 1 tarayıcı sürümlerini ve destekledikleri yazı tipi biçimlerini listeler.
| Biçim | Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
En çok desteklenen biçim TTF'dir. 9.0 sürümüne kadar IE ve iOS hariç, tüm tarayıcılar bunu mükemmel bir şekilde anlar. Yani bu formatta bir fontunuz varsa ve modern tarayıcıları hedefliyorsanız herhangi bir ek işlem yapmanız gerekmez. Aşağıdaki kodu stillerde yazmanız yeterlidir (örnek 1).
Örnek 1. TTF'yi Bağlama
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
İlk olarak, @ font-face kuralını kullanarak font dosyasının kendisini yükleyin. İçine font-family parametresini kullanarak yazı tipinin adını ve src kullanarak dosyanın yolunu yazıyoruz. Sonra yazı tipini her zamanki gibi kullanıyoruz. Dolayısıyla, başlık için yazı tipini ayarlamamız gerekirse, h1 seçici için örnekte gösterildiği gibi, yüklenen yazı tipinin adıyla yazı tipi-ailesi özelliğini ayarlıyoruz. IE'nin eski sürümleri için virgülle ayrılmış yedekleri listeleriz. Bu durumda, başlık yazı tipi "Comic Sans MS" olacaktır çünkü IE8 ve altı TTF formatını desteklemez.
Bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.
Pirinç. 1. İndirilen yazı tipine sahip başlık
IE8'de süslü bir yazı tipine ihtiyacınız varsa ne olur? Neyse ki @ font-face, aynı anda farklı formatlarda birden fazla font dosyası eklemenize izin verir. Tarayıcının yalnızca uygun olanı seçmesi gerekir. Bu nedenle, tüm tarayıcılarda çalışan evrensel bir çözüm, mevcut TTF biçimini EOT'ye dönüştürmek ve ardından her iki dosyayı birbirine bağlamaktan ibarettir.
Dönüştürme için, bir TTF dosyası indirmenize ve çıktıda bir EOT dosyası almanıza izin veren birkaç çevrimiçi hizmet vardır. Ne yazık ki, bu hizmetlerin çoğunda aynı sorun var - dosyayı alıyoruz, ancak Rusça dili desteklenmiyor. Sonuç olarak istenilen sonuca ulaşılmaz, dönüşüm yanlıştır. Kontrol ettiğim siteler arasında, metni IE'de doğru gösteren bir site vardı.
Bu siteye gidin, TTF dosyasını yükleyin ve "TTF'yi EOT'ye Dönüştür" düğmesine basın, ardından ortaya çıkan dosyayı yazı tipleri klasörüne kaydederiz. Farklı tarayıcıları yazı tipini doğru biçimde yüklemeye zorlamak için stillerde küçük bir numara kaldı. Bunu yapmak için iki src parametresi ekleyin. İlki, EOT dosyasına işaret eder ve IE'nin eski sürümleri içindir. İkinci src parametresi, biri bir TTF dosyasına işaret eden virgülle ayrılmış iki adres içermelidir. Gerçek şu ki, IE sürüm 8.0 ve öncesi, src parametresindeki virgülü anlamaz ve buna göre parametreyi tamamen yok sayar. Birkaç yazım seçeneği olabilir, örneğin url'yi tekrarla, yerel parametre içinde yazı tipi adını belirtin veya var olmayan bir yazı tipini tamamen yazın. Tarayıcı böyle bir yazı tipini yükleyemezse, listede ikinciye gider ve doğru şekilde yazdık. Kabul edilebilir yazma yolları.
kaynak: url (yazı tipleri / pompadur.ttf), url (yazı tipleri / pompadur.ttf);
kaynak: yerel (pompadur), url (yazı tipleri / pompadur.ttf);
kaynak: yerel ("bla bla"), url (fontlar / pompadur.ttf);
Tüm tarayıcı sürümleri için bir yazı tipi bağlamak için çalışan bir seçenek örnek 2'de gösterilmiştir.
Örnek 2. EOT'yi Bağlama
HTML5 CSS3 IE Cr Op Sa Fx
Siyasi sürecin modern bir unsuru
Aslında, Montesquieu'nun politik öğretisi, Michels'in eserlerine yansıyan kıta-Avrupa tipi politik kültüre öncülük eder.
İOS'a gelince, SVG formatında ayrı bir yazı tipi oluşturmanın ve indirmenin pek bir anlamı yok gibi görünüyor. İOS üzerinden gezinen sitelerin izleyicileri hala küçük, ayrıca sitenin mobil cihazlar için sürümünü kolaylaştırmaya çalışıyorlar ve birkaç on kilobayt daha indirmek istenmiyor.
Google Web Yazı Tipleri
Farklı yazı tipi biçimlerini ve tarayıcı sürümlerini destekleme rutinini devralan kullanışlı bir hizmet şu adreste bulunabilir: www.google.com/webfonts... Koleksiyonda nispeten az sayıda farklı yazı tipi olmasına rağmen (birkaç düzine var), hepsi çok kaliteli ve web sitelerinde kullanım için ücretsiz.
Bir yazı tipi seçmeden önce, Komut Dosyası değerini Kiril olarak değiştirin, ardından Rusça'yı destekleyen yazı tiplerinin bir listesini göreceksiniz (Şekil 2).
Pirinç. 2. Google Web Yazı Tiplerinde yazı tiplerini seçme
Beğendiğiniz yazı tipi, önce "Koleksiyona Ekle" butonu, ardından ekranın sağ alt köşesindeki "Kullan" butonu ile koleksiyona eklenmelidir. Sonraki sayfada (Şekil 3) nihayet ihtiyacınız olan yazı tiplerini seçebilirsiniz. Bir yazı tipinin birkaç stil içerebileceği ve her birinin indirilen dosyaların hacmini artırdığı anlaşılmalıdır.
Pirinç. 3. Sayfaya yüklenen yazı tipleri
Seçilen yazı tiplerini üç yoldan biriyle bağlayabilirsiniz; eklenen kod sayfanın aşağısına kopyalanabilir.
1. Öğe aracılığıyla ... Çizgi aşağıdaki gibi görünecek.
2. @import kuralı aracılığıyla. Bu satırı en üstteki CSS dosyamıza ekliyoruz.
@import url'si (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. JavaScript aracılığıyla.
Temel olarak, tüm yollar eşittir, bu yüzden tercihinize göre seçin.
Bu hizmeti kullanmanın avantajları aşağıdaki gibidir.
- Yazı tiplerini kullanmak ücretsizdir, onlar için ödeme yapmanız gerekmez.
- Sunulan yazı tipleri ekranda görüntülenmek üzere "keskinleştirilir", dosyalar optimize edilir ve nispeten küçük bir hacim kaplar.
- Tarayıcı otomatik olarak algılanır ve bunun için gerekli formatta bir yazı tipi görüntülenir.
Hizmetin ana avantajlarından biri, yazı tiplerinin TTF, EOT, WOFF, SVG formatlarında saklanması ve tarayıcı kontrol edildikten sonra yüklenmesidir. Bu nedenle, EOT formatı yalnızca IE'nin eski sürümleri için geçerli olacaktır.
Google Web Yazı Tiplerini kullanıp kullanmamak size kalmış. Orada uygun bir yazı tipi bulamadıysanız, popüler ve yaygın TTF'yi her zaman bağlayabilirsiniz. Ayrıca, tüm popüler tarayıcıların en son sürümleri tarafından desteklenmektedir.
Yazı tipi sitenin tasarımında önemli bir rol oynar, genel stili vurgulayabilir, kullanıcının metin içeriğinde gezinmesine yardımcı olabilir. Ücretsiz yazı tiplerini aramak ve ardından farklı tarayıcılar için bir sürü dosyayı bağlamak tatmin edici bir iş değil, ancak bir çıkış yolu var - Google Fonts'tan yazı tipleri.
Google Fonts'tan doğru yazı tipini bulma
Google yazı tipi hizmetinin kendisine gidelim ve yeteneklerine bir göz atalım.
Sol (yan) panelde, yazı tipi filtreleme parametrelerini yapılandırabilir ve en önemlisi Kiril veya Latin alfabesine ait olup olmadığını seçebilirsiniz.
Üst kısımda, demo metninin görüntüsünü şu şekilde değiştirebilirsiniz: kelime, cümle, paragraf, poster. Yazı tipi boyutunu değiştirin ve demo versiyonu yerine kendi metninizi girin.
Google Fonts'tan bir yazı tipi bağlama
İstediğiniz yazı tipini seçtikten sonra "hızlı kullanım" düğmesine tıklayın (aşağıdaki resme bakın)
Yazı tipi bağlantı sayfasında şunları seçmeniz gerekir:
1. Yazı tipi stilleri, kalın, italik vb. Çok fazla overclock yapmayın, sadece en gerekli olanı seçin, çünkü tüm bunlar yazı tipini yükleme hızını ve buna bağlı olarak metni sitenize yükleme hızını etkiler. Sağdaki sensörün göstergelerini takip edin (resimde 5. nokta)
2. Bu yazı tipinde ihtiyacınız olan karakterleri seçin (çoğunlukla Latince ve Kiril).
3. Bağlantı etiketi kodunu HEAD bloğuna kopyalayın
4. Yazı tipi bildirimini 4. paragrafta gösterildiği gibi stillerde kullanıyoruz (resme bakın)
