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 bu 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 ile 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ı belgenin 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 işgal edebilir büyük hacimli böylece 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 hedefleme yapıyorsanız modern tarayıcılar, ek bir işlem 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. V bu durum 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. 1.
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 birden fazla font dosyası eklemenize izin verir. farklı formatlar... 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 siyasi doktrini, Michels'in eserlerine yansıyan kıta-Avrupa tipi siyasi kültüre öncülük ediyor.
İ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 sürümü şu an altında. mobil cihazlar kolaylaştırmaya çalışıyorlar ve birkaç on kilobayt daha yüklemeniz önerilmez.
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 vardır), hepsi çok kaliteli ve web sitelerinde kullanım için ücretsizdir.
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. Açık sonraki Sayfa(şekil 3) nihayet istediğiniz 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çili yazı tiplerini aşağıdakilerden birini kullanarak bağlayabilirsiniz. üç yol, 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 (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.
Uygulamanın Faydaları bu servisçok.
- 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, desteklenen en son sürümler tüm popüler tarayıcılar.
// echo get_the_post_thumbnail (get_the_ID (), "ilgili küçük resim"); // küçük resim boyutumu göster?>
Bu eğitimde, web yazı tiplerinin mizanpaja nasıl dahil edileceğini analiz edeceğiz. Web yazı tipleri, tasarımları daha benzersiz veya çeşitli hale getirmek için kullanılan tamamlayıcı yazı tipleridir. Yazı tipinin sayfaya bağlanması - tüm tarayıcılarda doğru görüntülenmesini sağlar ve kullanıcının yazıp yüklemediği önemli değildir.
Google Fonts'tan bir yazı tipi nasıl bağlanır
Adım 1 - bir yazı tipi seçin
Hizmet Google yazı tipleri bir projeye tek satırda bağlanabilen ve anında kullanılabilen çok sayıda web yazı tipine sahiptir. CSS stilleri... Görüntülemek üzere yalnızca Kiril yazı tiplerini seçmek için, Komut Dosyası parametresinde soldaki filtrede Kiril (Kiril için) veya Kiril Genişletilmiş (genişletilmiş Kiril için) seçmelisiniz. Bundan sonra, Kiril'i destekleyen yazı tipleri sağda gösterilecektir.
Hızlı kullanım için Hızlı Kullanım düğmesine tıklayın.
Adım 2 - yazı tipi ayarlarının yapılması
Bir sonraki sayfada hangi yazı tiplerini kullanacağımızı seçiyoruz. OpenSans'ın çok inceden ekstra kalına kadar 10 ağırlığı vardır. Ne kadar çok stil seçilirse, sayfa yükleme hızı o kadar çok etkilenir. Bu nedenle, yalnızca kullanılan yazı tiplerini bağlamaya değer. Bundan sonra karakter setlerini seçebilirsiniz, Kiril için Genişletilmiş Kiril veya Kiril ve Latin'i seçiyoruz.
Adım 3 - yazı tipini bağlamak için kod
Ardından sitenize bağlanmak için bir kod satırı alıyoruz. Standart seçenek - html'den üçüncü taraf css dosyasını bağlama, @import sekmesinde - bir css dosyası aracılığıyla bağlanmak için bir dize ve Javascript için üçüncü bir seçenek olacaktır. Bundan sonra bağlantı hazırdır ve bu yazı tipini düzende kullanabilirsiniz. Aşağıdaki blok, bir yazı tipine nasıl erişileceğinin bir örneğini gösterir: font-family: "Open Sans", sans-serif;
Yazı tipi ağırlığı parametresini kullanarak genişliği ayarlayın: 300; veya yazı tipi ağırlığı: 400; yazı tipi ağırlığı: 800; İtalik - yazı tipi stili aracılığıyla: italik; ...
kullanım örneği
Sonuç olarak, yazı tipini CSS'de @import ile bağlamayı seçersek, CSS dosyamız şöyle görünecektir:
/ * Yazı tipi bağlantısı * / @import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * h1 başlığının stilini tanımlayın * / h1 (/ * Yazı tipi olarak bağlı "Open Sans" yazı tipini seçin * / font-family: "Open Sans", sans-serif; / * Yazı tipinin boyutunu seçin 300 , bu, Light yazı tipine karşılık gelir - ince boyut için * / yazı tipi ağırlığı: 300;)
Selamlar sevgili okuyucular. Bugün google web fontlarından nasıl indirilip siteye bağlanılacağından bahsedeceğiz.
siteye git www.google.com/fonts/, sağdaki filtrede şunları seçin: 1. istediğiniz kategoriyi, 2. gerekirse bunları sıralayın ve 3. ihtiyacımız olan dili seçin (soldaki menüden Rusça yazı tipine ihtiyacınız varsa, Kirillik).
Bu yüzden yazı tipini seçtik, şimdi stilini seçmemiz gerekiyor, bunun için aşağıdaki paneli genişletin ( Seçim çekmecesini aç) ve sekmeye gidin ÖZELLEŞTİRME ve istediğiniz stilleri ve dilleri seçin.
İndirmek için butona tıklayın indir.
İndirilen yazı tipini bağlama
Arşivde bulunan yazı tiplerini, HTML sitenizin / css klasörüyle aynı dizinde olması gereken / yazı tipleri klasörüne kopyalayın.
İndirilen yazı tiplerinin standart bağlantısıöyle görünüyor
@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") biçimi ("gömülü-opentype"), url ("Font_file_name" .eot .woff ") biçimi (" woff "), url (" Font_file_name.ttf ") biçimi (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") biçimi (" svg "); yazı tipi ağırlığı: normal ; yazı tipi stili: normal;)
Benim durumumda, bağlantı şöyle görünecek
/ * /css/style.css * / @ font-face (font-family: "RobotoRegular"; url ("../ fonts / RobotoRegular.ttf") biçiminde ("truetype") bir yazı tipini bağlamak için kod; yazı tipi - stil: normal; yazı tipi ağırlığı: normal;)
Seçtiğiniz yazı tipini siteye bağlamak için sekmeye gidiniz. GÖM, orada 2 bağlantı yöntemi göreceksiniz:
1. STANDART
Bu kodun bölüme eklenmesi gerekiyor
HTML belgeniz.2. @İTHALAT
@import url ("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");
Önemli. Bağlantı yönteminden bağımsız olarak, bu aileleri tanımlamak için aşağıdaki CSS kurallarını kullanın: font-family: 'Roboto', sans-serif; bu konuda daha fazlası aşağıda.
Herkese merhaba! Bunu okuyabilirsiniz, ders 132'de yazdım. Ve bu yazımda sizlere Google Fonts'tan sitenize nasıl hızlı ve kolay bir şekilde yazı tipi bağlayabileceğinizi anlatacağım. Google Yazı Tipi hizmetinde siteniz için bir yazı tipi seçmeniz ve ardından onu bağlamanız gerekir.
Yazı tipi dosyasını barındırmaya yüklemek gerekli değildir. Gerekli HTML kodunu site başlığına ve yeni font adına yazmanız yeterlidir. Yazı tipleri yalnızca bir WordPress sitesine değil, başka herhangi bir siteye de bağlanabilir.
Google Yazı Tiplerini sitenize nasıl bağlayabilirsiniz?
git Google hizmeti Bu bağlantıdaki yazı tipini ve ihtiyacımız olan yazı tipini seçin.
Fontlar bir filtre aracılığıyla seçilebilir. Yani parametreleri ayarlıyoruz ve böylece servis seçilen parametrelerle yazı tiplerini buluyor.
Gerekirse diğer parametreleri ayarlayabilirsiniz: kalınlık (yazı tipi kalınlığı), eğim (italik), genişlik (yazı tipi genişliği).
Ayrıca siteniz Rusça ise Kiril alfabesini seçmeniz gerekir: Kiril (Kiril) veya genişletilmiş Kiril (genişletilmiş Kiril).
Parametreler seçildiğinde, servis bunlarla kullanılabilen tüm yazı tiplerini gösterecektir.
Fare imlecini siteye yüklemek istediğimiz yazı tipinin üzerine getiriyoruz, ardından ek ayarlar / parametreler beliriyor: Hızlı kullanım ( hızlı kullanım), Açılır (yazı tipini görüntüle ayrı pencere) ve Koleksiyona Ekle.
Biz seciyoruz " Hızlı kullanım"Ve bakın Sağ Taraf bir hız göstergesi şeklinde widget. Seçilen yazı tipinin ne kadar hızlı yüklendiğini gösterir. Bu hız göstergesindeki sayı ne kadar düşükse, o kadar iyidir.
Aşağıda yazı tipini siteye yüklemek için üç seçenekten birini seçebilirsiniz: standart, @import veya javascript.
Her seçenek için talimatlar vardır ingilizce dili yazı tipini siteye nasıl düzgün şekilde bağlayacağınız. Sana ilk seçeneği göstereceğim " standart"Çünkü daha basit.
Kırmızı ile vurgulanan satırı kopyalayın ve ardından etiketlerin arasına header.php dosyasına yapıştırın.
….
Ardından style.css stil sayfasını açın, değiştirilmesi gereken yazı tipini bulun ve yeni bir tane yazın. Sadece yeni yazı tipinin adını yazıyoruz. Google Yazı Tiplerini tırnak içine alın, örneğin yazı tipi ailesi: "Aladin", Arial, Helvetica, Sans-serif.
Eğer burada anlattıklarımızdan hiçbir şey anlamadıysanız o zaman detaylı olarak anlattığım videoyu izleyin, Google Yazı Tipi WordPress sitesine nasıl bağlanır
______________________
204. derse ve eklentisiz
Malzeme sponsoru.
Çevrimiçi mağazadaki klimalar http://www.technodom.kz/catalog/konditsionery. Klimalar - en iyi mal, borç verme, büyük seçim, kusursuz hizmet.
İyi günler, sevgili okuyucular. Muhtemelen hepiniz kendi sitenizin veya müşterinizin sitelerini daha özlü ve çekici hale getirmeyi hayal ediyorsunuz.
Sitedeki bilgilerin algılanmasından sorumlu olan ana faktörlerden biri yazı tipleri ve bunları birlikte nasıl kullandığımızdır. Bir sitede, örneğin başlıklar ve yalnızca gövde metni için en sık iki veya daha fazla yazı tipi kullanılır.
Metinlerin okunabilirliğini görsel olarak iyileştirme olasılıklarından biri, üçüncü taraf yazı tiplerini bağlamaktır. Sonuçta, herkes muhtemelen Windows'ta tarayıcıda metin görüntülemekten sorumlu olan "zayıf" standart Kiril yazı tipi koleksiyonunu bilir.
Standart yazı tipleri:
Cufon ve @ yazı tipi yüzü
Daha önce, standart olmayan yazı tiplerini siteye bağlayabileceğiniz hakkında zaten yazdım. Şimdi daha kolay bir yola bakalım - bu, css'deki @ font-face kuralıdır ve fontun kendisini Google Fonts mağazasından yükler.
Cufon ve @ font-face arasındaki tüm fark, ilkinin fontu taklit etmek için js kullanması ve sembolleri kendi araçlarıyla çizmesi, @ font-face ise fontun kendisini ziyaretçinin bilgisayarına indirmesi ve tarayıcının zaten onu görüntülemek için kullanmasıdır. Metin.
Her durumda, Cufon ve @ font-face, önemli ölçüde olmasa da site yükleme hızını yavaşlatır.
Sitede Google Yazı Tiplerinin Kullanımı
Çok fazla resim yapmayacağım ve uzun bir süre, bu blogu örnek olarak kullanarak Google Fonts'u bağlamanın belirli bir örneğini vereceğim.
Gördüğünüz gibi makale başlıklarım ve alt başlıklarım standart olmayan bir fontta, bu yüzden şimdi pratikte bunun nasıl yapıldığını göstereceğim ve sitelerinizde benzetme yaparak deneyeceksiniz.
Depoda bir yazı tipi seçme
Korkmamak için açıklayacağım - bir depo bir depodur, ancak burjuva bir şekilde :). Ve böylece, gidiyoruz http://www.google.com/fonts/ ve kendimize uygun bir yazı tipi arayın:
Menüde pek yok:
Sol tarafta, gördüğünüz gibi, örneğin yalnızca Latin veya Kiril yazı tiplerini seçebileceğiniz her türlü yazı tipi arama filtresine sahip bir blok var. Ve en üstte, 4 sekmeye bölünmüş örnekleri görüntüleme ayarları:
- Kelime- birkaç harfin görüntülenmesi. Bu modda, birçok yazı tipini aynı anda karşılaştırmak ve belirli karakterlerin nasıl göründüğünü görmek uygundur;
- Cümle- bir cümle şeklinde görüntüleme;
- Paragraf- zaten metnin kendisinde bulunan yazı tipini görsel olarak karşılaştırmanıza izin verecek büyük bir metin parçası görüntülenir;
- Afiş- başlıklar görüntülenir, bu karşılaştırma yöntemi başlıklarda kullanılacak yazı tipini seçmek için uygundur.
Yazı tipini siteye bağlama
Bundan sonra, en alttaki Koleksiyon panelinde, koleksiyonunuzdaki yazı tiplerini kullanmaktan sorumlu olan Kullan sekmesine gidin. Burada Google'ın sayfa yükleme hızının ne kadar bozulacağını gösterdiğini hemen göreceksiniz:
Aşağıda, Latince (latin) ve Kiril (Kiril) seçeneklerinden oluşan ve bize hem Latin hem de Kiril harflerini görüntüleme olanağı verecek olan "görüntüleme türü" seçeneklerine sahip bir panel bulunmaktadır:
Bundan sonra, bu sayfadaki üçüncü öğeye, yani bağlantının kendisine geçiyoruz. Google bize yazı tiplerini gömmek için üç seçenek sunar - js aracılığıyla, standart yol bağlantı yoluyla
ve css dosyasında @import. Ben son yöntemi kullanıyorum.Css dosyamızı açıyoruz ve google'ın bize sağladığı satırı yazıyoruz:
İşte bu, Google Fonts'tan gelen fontu siteye bağladık, şimdi nasıl kullanılır?
CSS'de Kullanım
Her şey oldukça basit, @import üzerinden fontu bağladıktan sonra kayıt olmamız gerekiyor. standart talimat yeni yazı tipimizin kullanılacağı sınıflar ve göstergeler için. Örneğin:
h1, h2, h3 (yazı tipi ailesi: 'Cuprum', sans-serif;)
Tüm bu manipülasyonlardan sonra, standart olmayan yeni bir yazı tipine sahip başlıklara sahip olacaksınız.
Hepsi bu, ilginiz için teşekkür ederim ve yakında görüşürüz.
