Web tasarımı için Rusça yazı tipleri. Güvenli yazı tipleri. Artık robotlarınızın tasarımını web yazı tiplerini kullanarak geliştirmenin zamanı geldi

Metin, dünyada bilgi aktarmanın ana yoludur ve sonuç olarak bir web sitesinin en önemli bileşenlerinden biridir. Böyle bir durumda, metinlerin fazla bilgilendirici ve sıkıcı olmamasını, aynı zamanda iyi görünmesini sağlamak sitedeki herhangi bir yetkilinin görevi olması doğal ve mantıklı görünmektedir. Bu amaçla, modern web tasarımı ve sayfa düzeni teknolojileri harika bir araç deposu sağlar. Bugün bunlardan en önemlileri hakkında konuşacağız - yazı tipi ve web sitelerindeki tasarımının özellikleri.

Yazı tipi- Sitede sadece dekoratif bir unsur değil. Metnin görselleştirilmesindeki faydacı işlevine ek olarak şarap, müşteriyle etkileşimin tüm yönlerini etkileyen estetik ve psikolojik bir rol oynar. Estetik açıdan hoş bir siteyi andıran kalın bir yazı tipinin okunması kolay ve keyifli olurken, net olmayan veya kötü seçilmiş bir yazı tipi, okumayı denemeye dönüştürür ve okuyucuyu hoş olmayan duygulardan mahrum bırakır. Kâr amacı gütmeyen kuruluşların web sitelerinin tasarımında özgün yazı tipi çözümlerinin seçimine birkaç örnek:

Artık sitede güzel yazı tipleri kullanmanın olumlu etkisi bize açık hale geliyorsa, bunun nedeni beslenmedir. “Peki web sitenizde standart olmayan yazı tiplerini nasıl kullanıyorsunuz?”. Bunu bulmanın anahtarı bilgisayar yazı tiplerinin rasyonel çalışma prensibinde yatmaktadır.

Bilgisayar yazı tipi- Bir program veya işletim sistemi tarafından karakterleri ekranda görüntülemek için kullanılan bir dizi harf ve karakteri tanımlayan tek formatlı bir dosya. Vikipedi'yi başka kelimelerle ifade edersek, bu, bir web sitesindeki yazı tipleriyle çalışırken saygımız açısından önemli olan bir dizi temel hususa sahiptir.

1. Şarkı dosyası formatı. Dosya, çalıştığımız program tarafından değiştirilebilecek bir yazı tipindedir, bu “senkron program” formatında olabilir. Bilgisayar yazı tipi formatlarında otomatik olarak tutarsızlık sorununa yol açan bir kalıp vardır. Metnin görüntülendiği programdan etkilenmeyeceğiniz için yazı tipi seçimine dikkat etmeniz önemlidir.
2. Vikorist işletim sistemi programı. Yazı tipi dosyasının, metni görüntülemek için kullanılabilmesi için sistem tarafından fiziksel olarak erişilebilir olması gerekir. İnternetin zihninde bu önemsiz olmayan bir gizemdir. Site birçok farklı bilgisayarda görüntülense de gerekli yazı tiplerinin bulunmaması konusunda kusur bulamayız.
3. Harf ve karakter kümesinin açıklaması. Yazı tipinin, görüntülenen metindeki tüm karakterleri açıklayan glifler içerdiğinden emin olmalıyız. Örneğin Rusça metni Kiril glifleri gibi farklı bir yazı tipine dönüştürmeye çalışıyorsak hiçbir şey bulamayız.
4. Sembolleri görüntüleme ayarı. Metnin gözden geçirilmesini içeren programa, farklı yazı tipleriyle görüntülenebilecek bölümler hakkında bilgi vermenin bir yolunun olması gerekir.

Artık web sitelerinde yazı tipi kullanımıyla ilgili sorunları netleştirdiğimize göre, mevcut web düzeninin bunlarla nasıl başa çıktığını görelim.

Web siteniz için bir yazı tipi arayın

Yapmamız gereken en önemli şey uygun yazı tipini bilmek ve seçmek ve şuraya gitmek:

• gerekli dili destekler (Zokrema, Rusça)
• Yazı tipinin lisansı, yazı tipinin web sitesinde kullanılmasına izin verir

Hem ticari hem de ticari olmayan yazı tiplerini içeren çeşitli çevrimiçi kütüphanelerden yardım alabilir ve onların bulmasına, incelemesine ve test etmesine yardımcı olabiliriz.

• MyFonts, her yazı tipinin kökeni hakkında ayrıntılı bilgi ve seçenekleri seçme veya seçme olanağı sağlayan manuel bir arama sistemi sağlayan en büyük çevrimiçi yazı tipi kitaplığıdır.
• Google Web Fontları- Google tarafından oluşturulan ücretsiz olarak kullanılabilen yazı tiplerinden oluşan bir kitaplık; bu koleksiyondaki tüm yazı tipleri herhangi bir sitede ücretsiz olarak bulunabilir ve Google ayrıca bunların kurulumu için basit bir arayüz sağlar.
• Adobe Edge Web Fonts, arama ve test etme de dahil olmak üzere yaygın olarak bulunabilen yazı tiplerinden oluşan geniş bir katalog ve bunları bir web sitesine yerleştirme olanağı sunan benzer bir Adobe hizmetidir.
• free.type.org.ua - Kiril dokunuşuyla özgürce renklendirilmiş yazı tiplerinden oluşan bir koleksiyon.

Yogo Kirilichna adlı yazı tipindeki Yakshcho açıkça gömülü değil (KOLEKSİYON, Museo Sans Kiril), daha sonra Scho Piditrimsi Filmi, Simal Submiss, Scho Masive, Abo, bol miktarda onarılır, Bazı çevrimiçi kütüphaneler bu özelliği sağlar; alternatif olarak yazı tipi test hizmetlerini kullanabilirsiniz, örneğin:

• Typetester - test metnine punto boyutu, satır aralığı vb. gibi yapılandırılması gereken parametrelerle bakarak yazı tiplerinin test edilmesi ve seviyelendirilmesi.
• Wordmark - girişte olduğu gibi bir test ifadesinin görüntülenmesi yoluyla bilgisayara yüklenen yazı tiplerini test etmek için basit bir hizmet

Yazı tipi sitede ancak tasarımcıdan veya ajanstan alınan lisans sözleşmesinin (EULA) izin vermesi durumunda kullanılabilir. Birçok yazı tipi satıcısı (Kiril alfabesi dahil, örneğin ParaType) böyle bir lisans sağlar. Yerel bir ajanstan bir yazı tipi için web lisansı satın almanın alternatifi olarak Web Yazı Tipi Gömme Hizmetleri mevcuttur. Ayrıca, müşterilerine yazı tiplerini özelleştirme ve bunları web sitelerinden aylık bir ücret karşılığında satın alma fırsatı veren bir yazı tipi kütüphanesi de vardır (tedarik hizmetlerinin incelenmesi). Aralarında en popüler olanlar:

Ancak tüm bu hizmetler, yönelimleri nedeniyle öncelikle yurtdışı (Latin alfabesini kullanan) pazarına yöneliktir ve Kiril alfabesini destekleyen yazı tipi sayısı azdır. Bu hizmetlerin abonelik fiyatı yüksektir ve ticari olmayan belirli bir proje için engelleyici olabilir. Buna değerli bir alternatif, halihazırda icat edilmiş olan ve aynı zamanda birçok tasarımcı ve ajans tarafından yayınlanmakta olan, örneğin Google Webfonts veya Adobe Edge Web Fonts'tan serbestçe genişletilmiş yazı tiplerinin kullanılmasıdır (yazı tiplerinin lisanslanması sorunu hakkında bir rapor). web A List Apart makalesinde yayınlanmıştır).

Web için yazı tipi formatları

Farklı sistemlerde farklı performans gösteren ve farklı görevlere uygun çok sayıda masaüstü ve web yazı tipi formatı vardır. Yüzlerce web sitemiz en son formatları kullanıyor:

TTF- TrueType, Apple tarafından 1980'lerden bu yana geliştirilen bir bilgisayar yazı tipi formatıdır ve şu anda Apple ve Microsoft tarafından işletim sistemlerinde kullanılmaktadır. Yazı tipi dosyaları genişletilebilir .ttf.

OTF- OpenType, Microsoft ve Adobe'nin işletim sistemlerinde kullanılmak üzere ortaklaşa geliştirdiği yazı tiplerine yönelik bir dosya formatıdır. OpenType, TrueType'tan daha fazla işlem gücüne sahiptir ve daha küçük bir dosya boyutunda daha büyük bir karakter kümesini destekler. Platformlar arası OpenType, yazı tipinin hem Windows hem de Mac OS sürümlerinin tek bir dosyaya eklenmesiyle elde edilir. Yazı tipi dosyaları genişletilebilir .ttf ya da başka başka.

EOT- Gömülü OpenType - Microsoft tarafından geliştirilen, OpenType web sitelerinde dağıtılan kompakt bir yazı tipi formatı. Bu tür yazı tiplerinin dosyaları genişletilebilir .eot. Gömülü OpenType formatı tescillidir ve Internet Explorer tarayıcısı tarafından desteklenir.

WOFF- Web Açık Yazı Tipi Formatı - OpenType veya TrueType formatındaki orijinal yazı tiplerini içeren bir kap görüntüsü de dahil olmak üzere sıkıştırılmış bir OpenType veya TrueType yazı tipi biçimi. Bu durumda çıktı yazı tipleri, aktarım kolaylığı için sıkıştırılır ve yazı tipine ilişkin bilgi ekleyebilecek bir dizi veriyle birlikte sunulur.

SVG- Ölçeklenebilir Vektör Grafikleri - yazı tipini tanımlamak ve sunmak için kullanılabilen, ölçeklendirilmiş vektör grafiklerinin düzenine yönelik bir dil.

Web siteleri, farklı işletim sistemlerinde de çalışan farklı tarayıcılarda (Windows, Mac OS, Linux, Android, iOS vb.) görüntülenir. Özel bir yazı tipiyle çoğu (ideal olarak tüm) durumlarda görünmesini sağlayabiliriz. Bu seçenekler tamamen platformlar arası olmadığından, aynı hedefe ulaşmak için ayarlanmaları gerekecektir. Siteye eklemek için bir format kombinasyonu seçmeniz önerilir: TTF, WOFF, EOT, SVG. İster TTF ister OTF yazı tipi olsun, vikoryst'i, örneğin Fontsquirrel oluşturucuyu dönüştürebilirsiniz - bir yazı tipini içe aktarmanıza ve onu gerekli formatlara dönüştürmenize olanak tanıyan bir hizmet. Ayrıca siteye yazı tiplerini daha fazla yüklemek için kullanılabilecek CSS kodu oluşturur.

Google kitaplığını veya Adobe Edge'i kullanıyorsanız formatlar konusunda endişelenmenize gerek yoktur. Firmaların sağladığı yazılım hizmeti çoğu türde font desteği sağlamaktadır.

Web sitesine yazı tipi ekleme

Sitedeki içerik için yazı tipleri oluşturma yeteneği (resimleri veya videoları nasıl oluşturduğumuza benzer şekilde), metin dahil sayfadaki tüm öğelerin tasarımından sorumlu olan CSS stillerim tarafından sağlanır. Bu teknolojinin gelişiminin ilk aşamalarında, aynı veya diğer öğelerin görünümünün bozulmasından hangi yazı tipinin sorumlu olduğunu belirtmek mümkündü. Ancak koristuvach'ın bilgisayarına yapılan kurulumlardan bu yazı tipinin sorumlu olduğu belirtildi. Belirli bir yazı tipinin kullanılabilirliğini "güvence altına alma" seçeneği olarak, sistemin tutarlı bir şekilde aramaları seçmesi ve listede bulunan ilk seçeneği seçmesi için bir dizi yazı tipini "öncelik" sırasına göre ayarlamak mümkündü. Bu yaklaşım kavramı doğurdu web yazı tipleri için güvenli(web kaydetme yazı tipleri) - bilgisayar kullanıcılarının bilgisayarlarına yaygın olarak yüklenen, örneğin işletim sistemi kurulum paketine dahil edilen veya yalnızca büyük popülerliklerinden yararlanan bir dizi yazı tipi.

Bu tür yazı tiplerinin "genişliğine" ilişkin istatistikler, her biri için bir dizi "güvenlik" yazı tipi oluşturmaya da yardımcı olan cssfontstack.com ek hizmeti kullanılarak elde edilebilir.

Görünüşe göre o dönemin web araçlarının tüm yetenekleri, "güvenli" sette yer alan düzinelerce yazı tipinde yoğunlaşmıştı. CSS'nin gelişmesiyle birlikte yazı tiplerini siteye "uygulamak" mümkün hale geldi. tarayıcının siteye bakmasını sağlamak ve böylece kullanıcının bilgisayarında kullanılabilir hale gelmek için font dosyasını başka bir siteyle birlikte sunucuya yerleştirip şablon kodunda kullanın. Ek @font-face yönergesini kullanarak daha güncel tarayıcılar tarafından desteklenir ve daha fazla sitede yer alır. Ayrıca tercih ederseniz ana fontun herhangi bir nedenle kullanılamaması durumunda kullanılabilecek “güvenlik” font seçeneklerini de belirtmeyi unutmayın. Otje, Yazı tipi resmi sunucuda oluşturuluyor ve değiştiriliyor.

1. TTF veya OTF formatı için gerekli yazı tipini biliyoruz, ihtiyacımız olan dili desteklediğini doğruluyoruz.
2. Çeşitli web formatlarından yazı tiplerini dönüştürmek için Wikorist'in Fontsquirrel oluşturucusu.

1. Oluşturucunun, font dosyalarını içeren bir @font-face-package oluşturması (bunlar, şablonun diğer öğeleriyle birlikte sunucuya yerleştirilmelidir) ve @font-face kurallarını hazırlaması gereklidir. Kendi sitemdeki stil dosyasının en başına yerleştirilip, yeniden dönüştürülerek yazı tipi dosyalarının yönleri doğru şekilde belirtildi.

@font-face ( font-family: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg) '); yazı tipi ağırlığı: normal; yazı tipi stili: normal;

2. Bazı öğelerin normal CSS söz dizimine ek olarak yazı tipi kullanımına tabi olduğu stillerde belirtilir.

Parçalayıcı bir etki yaşamak mümkündür. Kendimizi de biraz affedebiliriz Yazı tiplerini içe aktarmak için Vikorist ve üçüncü taraf hizmeti, Örneğin Google Web Fontları.

1. Kütüphaneden bir yazı tipi seçiyoruz ve ihtiyacımız olan dili destekleyip desteklemediğini kontrol ediyoruz.
2. “İsveç Viktorya Dönemi” modunda ihtiyacımız olan görsel seçeneğini ve desteklememiz gereken karakter setlerini seçiyoruz. Ne kadar çok seçenek kullanmak istersek font dosyası o kadar önemli olur ve ilgilenmemiz de o kadar önemli olur. Bu yüzden açgözlü olanı seçmeyin.
3. Sistem tarafından oluşturulan kodu kopyalayıp site şablon koduna etiketlerin arasına yapıştırıyoruz. diğer mesajlardan önce .css Dosyalar.
4. Stillerde, normal CSS sözdizimine ek olarak yazı tipinin kullanılmasından kaynaklanan karışıklıktan bazı öğelerin sorumlu olduğu açıktır.

Standart olmayan yazı tiplerini kullanma yeteneğinin ödenmesi gereken bedeli üretkenlik kaybıdır; site daha kalabalık hale gelecek ve daha fazla bilgi işlem kaynağı gerektirecektir. Bu nedenle, bir sayfada çok sayıda standart dışı yazı tipi kullanılması ve ayrıca bunların başlıklar veya gezinme öğeleri gibi bitişik tasarım öğeleriyle çevrelenmiş ana metne paketlenmesi önerilmez (üretkenlik sorunu hakkında bir rapor). Şiddetle kullanılan yazı tipleri Habré'de okuyabilirsiniz).

Web yazı tiplerinin sitelerde pratik kullanımı hakkındaki tartışmamızın sonunda, web yazı tiplerine anahtar rol veren bir dizi site bulunmaktadır.

• Tercüme

Artık robotlarınızın tasarımını web yazı tiplerini kullanarak geliştirmenin zamanı geldi

Merezheva drukarna, kesintisiz olarak hayatının çalkantılı bir döneminden geçiyor. Teknolojideki son gelişmeler bizi internetin sanal dünyasına bir adım daha yaklaştırdı. Croc, bu kadar zamandır nasıl bir bıyık kontrol ediyorlar?

Web yazı tiplerini tüm kablolu işletim sistemlerinde güvenli bir şekilde kullanma özgürlüğü, üç ana, belki de acil teknolojik faktörün büyük etkisiyle mümkün hale geldi: tarayıcılarda @font-face kurallarının yaygın olarak benimsenmesi; Typekit ve Fontdeck gibi "yazı tipi canavarlarının" ortaya çıkışı; Yeni bir yazı tipi formatının oluşturulması - arşivlenmiş bir WOFF yazı tipi dosyası.

* Bu yazı tiplerinin çok azı Kiril alfabesine uygundur, dolayısıyla bu seçim “dış kaynak kullananlar” için daha uygundur. Bunlardan bazılarının yakında ortaya çıkacağını ve Kiril alfabesindeki Sloven dilleri için daha az yazı tipinin ortaya çıkmayacağını umuyoruz. Etiket ekle

Bir sayfa düzenine başlarken sayfada kullanılacak yazı tiplerini CSS'de dikkatlice belirlemek gerekir. Çoğu zaman, tasarımcı farklı yazı tiplerinde yalnızca sayfanın ana metnini değil aynı zamanda farklı başlıkları, logoları ve monogramları da yazar:

İyi bir tasarımcı ve iyi bir sayfa düzeni tasarımcısı, tarayıcının, sayfayı görüntülemek için tasarımcının bilgisayarında yüklü olan yazı tiplerinin aynılarını kullanabileceğini bilir. Daha sonra yazı tipleri akıllıca iki kategoriye ayrılabilir:

1. Çoğu geliştirici tarafından kolayca görüntülenebilen yazı tipleri.
2. Her gün çok sayıda sanatçının kullanımına sunulan yazı tipleri.

Tasarımcı, tasarım için başka bir kategorideki yazı tiplerini (örneğin bir logo veya büyük statik başlıklar) kullanmışsa, bu tekniği güvenle kullanabilirsiniz. Bu yöntemin durgunluğunun olmaması esnekliktir. Metni değiştirirseniz, görüntüyü yeniden işlemeniz ve CSS'yi değiştirmeniz gerekecektir (örneğin, yeni görüntünün boyutu eskisiyle eşleşmiyorsa).

Durgunluk tehlikesinin metne yapılan değişikliğin güvenilirliğinde yattığını söyleyebiliriz. Bu nedenle, örneğin standart olmayan yazı tipleri kullanan bir hikayenin kirli metninden kaçınmak imkansızdır! Yetenekli bir tasarımcı bunu bu şekilde düzeltemez. Ve eğer tasarımcı yeşilliklere kapılırsa, garniy dizgi tasarımcısı sadece hatasını düzeltmek ister - düzende bu yazı tipini standart yazı tipine mümkün olduğunca benzer şekilde değiştirin.

Birinci grubun yazı tiplerini diğerinden nasıl ayırt edebilirim? Doğrudan bilgisayarınıza yüklenen yazı tiplerinin yazımını gizleyemeyeceğiniz açıktır! En ileri gidelim.

Standart yazı tipleri

Standart yazı tipleri, işletim sistemiyle aynı anda yüklenen bir dizi yazı tipidir. İşletim sisteminin parçaları farklıdır ve yazı tipi kümeleri farklıdır. Windows'un farklı sürümleri için standart yazı tiplerinin bir listesi, örneğin Standart Windows yazı tipleri makalesinde ve Mac OS için standart yazı tiplerinin bir listesi, Mac OS ile birlikte gelen Yazı Tipleri sayfasında görüntülenebilir. Unix/Linux işletim sistemleri olduğu için tek bir yazı tipi kümesine sahiptirler. Birçok Linux kullanıcısı, özellikle perde arkasına kurulan Ubuntu'da DejaVu yazı tipi setini kullanıyor. http://www.codestyle.org istatistiklerine göre, birçok Unix/Linux kullanıcısı aynı zamanda URW, Free ve diğer yazı tipi setlerini de yüklemiştir. Bu istatistiklere göre, Unix/Linux kullanıcılarının %60'ından fazlası, bilgisayarlarındaki Web yazı tipi seti için Çekirdek yazı tiplerini kullanıyor; bu yazı tipleri, 2002 yılına kadar resmi olarak Microsoft web sitesinden ücretsiz olarak indirilebiliyordu.

İşletim sisteminden bağımsız olarak sayfanın tasarımcının amaçladığı şekilde görüntülenmesi için CSS'de virgülle oluşturulacak bir dizi yazı tipi belirlemek mümkündür.

Bu güç, yazı tipi ailesi adlarının ve/veya genel aile adlarının öncelik listesini belirtir. CSS2 spesifikasyonuna göre iki tür yazı tipi ailesi adı vardır:

1. Seçim için yazı tipi ailesinin adı. Örneğin, "Times new Roman", "Arial" ve diğerleri. Boşlukları doldurmaya yardımcı olacak yazı tipi ailelerinin isimleri ise pençelere düşmekle suçlanıyor. Tamponlar günlük olduğundan, yazı tipi adından önceki ve sonraki boşluk karakterleri dikkate alınmaz ve yazı tipi adının ortasındaki herhangi bir boşluk dizisi tek bir boşluğa dönüştürülür.
2. Aile (arka plan) aile. Spesifikasyon aşağıdaki genel ailelere sahiptir:
   • serif - uçlarında serif bulunan yazı tipleri;
   • sans-serif - sans-serif yazı tipi;
   • el yazısı - italik resimler için yazı tipi;
   • fantezi – dekoratif yazı tipleri;
   • tek aralıklı - tek aralıklı yazı tipi (aynı genişlikte harflerle).
   Ata ailelerinin isimleri anahtar kelimelerdir ve ayak altına alınması zorunlu değildir.

Böylece tasarım için OS Windows'tan standart bir font alınmış, Mac OS ve Unix/Linux için bir benzeri seçilerek, fontların orijinal vatanı belirlenmiş ve hazır hale getirilmiştir.

Ama bu o kadar basit değil. Raporun ayrıntılarına girelim.

Web uyumlu yazı tiplerini arama

İnternette tarihsel olarak “güvenli” Web yazı tipleri diye bir kavram vardı. Güvenli bir yazı tipi, tüm işletim sistemlerinde standart olan bir yazı tipi olarak adlandırılabilir. Böyle bir adalet kampının kalıntıları yok olup gidecek, o zaman Kesinlikle güvenli yazı tipleri yoktur!

Bazı yazı tiplerinin bir miktar güvenlikle güvenli olduğu söylenebilir.

"Güvenli" yazı tiplerinin belirlenmesinin temeli, diğer işletim sistemlerinde de kullanılan en popüler Windows işletim sisteminin yazı tipleridir. Böyle bir kaynağa örnek olarak, tahmin edebileceğiniz gibi istatistiklere dayanarak sayısız Unix/Linux kullanıcısı tarafından indirilen Web yazı tipi paketi için Çekirdek yazı tipleri verilebilir.

Bu paket şu yazı tiplerini içerir: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Tüm kokular RuNet için önemli olan Kiril alfabesini desteklemektedir.

Mac OS X'in standart kurulumuna dahil olan yazı tipleri seti (bu işletim sistemi, standart Mac OS sistemleri arasında en fazla genişlemeye sahiptir), Web seti için Çekirdek yazı tiplerindeki tüm yazı tiplerini içerir.

Böylece, diğer işletim sistemlerinde kullanılan Windows yazı tiplerine dayanarak, "güvenli" olarak adlandırılan Web yazı tiplerinin yeni bir listesi oluşturulmuştur:

• Arial
• Arial Siyah
• Komik Sans MS
• Kurye Yeni
• Gürcistan
• Darbe
• Times New Roman
• Trebuchet MS
• Verdana

Webdings yazı tipi simgeler yazarken yanıltıcı olduğundan içerik için kullanamazsınız. Andale Mono, ekrandan günlük metin okumaya uygun olmadığından ve tüm Windows kullanıcıları tarafından kullanılamadığından yaygın kullanım gerektirmez.

Tüm bu yazı tipleri tüm Windows, Mac OS X ve en önemlisi Unix/Linux sistemlerinde (Web paketi için Çekirdek yazı tiplerini yükleyen sistemlerde) mevcuttur.

Peki ya buna ne dersiniz? Tasarımcının fikrinin birden fazla en iyi kişiden etkilenmesini isterim!

Bu konuyu yayının başka bir bölümünde okuyun.

Bu bölümün ilk kısmı CSS yazı tiplerini öğrenmeye ayrılmıştır. Bu sayfada CSS'den önce yazı tiplerinin nasıl ekleneceğini, web yazı tiplerinin neler olduğunu ve onlarla nasıl çalışılacağını, hangi yazı tipi formatlarının mevcut olduğunu, Google Yazı Tiplerinin nasıl kullanıldığını öğreneceksiniz. Önce bir CSS yazı tipini bağlamanın kolay yoluna bir göz atalım:

P (yazı tipi ailesi: Verdana; )

Bu küçük kod parçası, tüm etiketlere kadar

Verdana yazı tipi güçlendirildi. Yazı tipi ailesinin gücü hangi yazı tipinin veya yazı tipinin kullanılacağını belirler. Kullanıcının tarayıcısındaki doğru görüntüleme stili, bilgisayarınızda yüklü olan görev yazı tipinin türüne bağlıdır. Bilgisayarınızda günlük Verdana yazı tipi varsa tarayıcınız yazı tipini görüntüleyecek ve ayarları yükleyecektir.

Günümüzde tasarımcılar, kullanıcının bilgisayarı ana bilgisayar olmayacağından, ekstra kullanım için bir dizi yedek yazı tipi belirlemek zorundaydı. Metni Verdana yazı tipinde biçimlendirmek ve yedek olarak Trebuchet MS, Cenevre veya başka herhangi bir sans-serif yazı tipini yüklemek isteyebilirsiniz. Bu şekilde kaydolun:

P (yazı tipi ailesi: Verdana, "Trebuchet MS", Cenevre, sans-serif;)

Bu kodu işlemeden önce tarayıcı, Verdana yazı tipinin kullanıcının bilgisayarında olup olmadığını hemen kontrol etmelidir. Etiketler yerine mevcut bir yazı tipi olarak

Bu yazı tipinde görünün. Yazı tipi günlük ise, tarayıcı yazı tipinin listede mevcut olup olmadığını kontrol edecektir – Trebuchet MS. Bu yazı tipi aynı tipte olduğundan, orijinal yazı tipi olan Cenevre'nin varlığı doğrulanır. Kullanıcının bilgisayarında Cenevre yoksa, tarayıcı mevcut başka bir sans-serif yazı tipini seçecek ve içindeki metni görüntüleyecektir.

Saygıyı yeniden sağlayın: Kodda pedlere Trebuchet MS yazı tipinin adını yazdık. İçinde boşluklar varsa çift veya tek ayaklı olarak fontun adını kullanmak gerekir.

Serifli (serif) ve serifsiz (sans-serif) yazı tiplerini Wikipedia sayfasında okuyabilirsiniz.

Web yazı tipi

Yazı tiplerini seçmenin daha iyi bir yolunu bulmanın büyük bir dezavantajı vardır; yazı tipi sayısıyla sınırlıdır. Büyük olasılıkla çoğu bilgisayar kurulu olduğundan yalnızca bu seçeneklerden memnun kalacaksınız.

Sayfa tasarımını bireysel kılmak ve özgünlük katmak için yazı tipi seçimini nasıl artırabilirsiniz? Web yazı tipleri yardıma geliyor. Aşağıdaki bölümü okuyun ve onlarla nasıl başa çıkacağınızı öğreneceksiniz.

Ancak gerekli yazı tipini tarayıcıda görüntüleyebilmemiz için bu yazı tipinin bilgisayarda yüklü olması gerekmektedir. Eyleme geçmek kolaydır. Yazı tiplerini CSS'den önce bağlamanın bu yöntemi, tasarımcılara çok çeşitli olanaklar sunar. Bir fıçı balın içindeki bir kaşık dolusu balı hatırlayalım: her şeyden önce, tarayıcı yazı tipi için aynı formatı desteklemiyor (bu da yazı tipinin görüntülenmemesine yol açacaktır) ve başka bir şekilde, Yazı tipi büyük değer içeriyor, ilginç yönlere yardımcı olabilirsiniz.

Format desteği

Dosya formatıyla uyumsuzluk sorunuyla nasıl başa çıkılır? En popüler yazı tipi formatlarını ve bunları hangi tarayıcıların desteklediğini gösteren tabloya bir göz atın:

Not: Desteklenen yazı tipi formatları hakkında güncel bilgileri caniuse.com web sitesinde bulabilirsiniz. Arama yapmak için format için bir ad girmeniz gerekir (örneğin, ttf).

Modern tarayıcıları hedefliyorsanız, en geniş ve en popüler olan TTF yazı tipi formatını kullanmanız gerekecektir. Son olarak, bir yazı tipi için birden fazla formata ihtiyacınız varsa, bir formattan diğerine özel çevrimiçi dönüştürücüleri hızlı bir şekilde kullanabilir ve ardından tüm dosyaları bunun üzerinden bağlayabilirsiniz. Bu sayede tarayıcı, çalıştığı yazı tipinin formatını seçebilir.

@font-face kullanarak bir web yazı tipi ekliyoruz

Örneğin MyUniqueFont adı altında benzersiz fontunuzu TTF formatında yerleştiriyorsunuz ve web sayfasının ana metninin o fontta görünmesini istiyorsunuz. Yapmanız gereken ilk şey yazı tipi dosyasını sitedeki diğer tüm dosyaların bulunduğu klasöre kopyalamaktır. Karışıklık yaratmayı önlemek için, özellikle yazı tipleri için bir klasör oluşturabilir ve bunu örneğin yazı tipleri olarak adlandırabilirsiniz.

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

Font ailesinin gücü bu durumda farklı bir rol oynar: Fonta ayrıca bir isim atarız, böylece daha sonra stili yazarken bu ismi kullanabiliriz:

P (yazı tipi ailesi: MyUniqueFont; )

Diğer satır dosya yazı tipinin yolunu gösterir. Uygulamamızda MyUniqueFont.ttf dosyası fonts klasöründe bulunmaktadır. URL'leriniz farklı olabilir.

Google Yazı Tipleri

Google, herhangi bir yazı tipini Google Yazı Tipleri koleksiyonuna bağlamayı kolaylaştırır. Kendinize uygun özel bir fontu kullanmaya başlamak için tek yapmanız gereken, fontu Google'a yazıp ardından o fonta özel mesajı kopyalayıp web dokümanınıza eklemek.

Not: Google yazı tiplerinin tüm koleksiyonu web sitesinde mevcuttur Google Yazı Tipleri. Sayfada yazı tiplerini kategoriye, ürüne ve alfabeye göre aramak için çeşitli filtreleri hızlı bir şekilde kullanabilirsiniz.

Google yazı tipine bağlanma prosedürü aşağıda açıklanmıştır. Neler olup bittiğine dair fikir edinmek için Google Fonts sayfasından bir yazı tipi seçin ve Hızlı kullanım düğmesini tıklayarak açın.

1. Adım: görseli seçin

Seçilen yazı tipinin sayfasında, yazı tipinin akışkanlığından daha az bir şey ifade etmeyen hız göstergesi simgesinin yanı sıra oturma seçeneğini de göreceksiniz. Yazı tipi için ne kadar çok stil seçerseniz, onu şekillendirmeniz o kadar fazla zaman alır. Bu nedenle yalnızca kullanmayı planladığınız görüntü seçeneklerini seçmeniz önerilir.

Croc 2: alfabeyi seç

Sayfanın ilerisinde bir karakter seti seçebilirsiniz: Latin, Kiril vb. Yazı tipine bağlı olarak, tüm alfabe seçenekleri mevcut olmayabilir. Önceki noktaya benzer şekilde, ihtiyacınız olan alfabenin karşısındaki kutuyu işaretlemeniz yeterlidir.

Krok 3: kodu siteye ekleyin

İlk yöntem, HTML kodunun Google sunucusuna gönderilmesini ve yazı tipinin içe aktarılmasını sağlamaktır. Bitmiş kod parçasını kopyalayıp etiketlerin arasına yerleştirmeniz gerekir. HTML belgenizde. popo:

...

Başka bir yol da yazı tipini ek @import yönergesine bağlamaktır. Tamamlanan kod, seçilen Google yazı tipinin sayfasındaki başka bir sekmede (3. madde) bulunabilir. Bunun stil sayfanızın tabanına eklenmesi gerekir (aksi takdirde dosya içe aktarılmayacaktır). Kod şuna benzer:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

İlk yöntemin özelliği, düzenlemeyi planladığınız her sayfanın başlığındaki yazı tipine notlar eklemeniz gerektiği gerçeğinde yatmaktadır. Az sayıda sayfaya sahip sitelerde bunu yapmak kolaydır ancak büyük kaynaklar için sorunludur. Başka bir manuel yol, kodun mevcut stil sayfasının üstüne yerleştirilebilmesi ve ardından bu tablonun bağlı olduğu tüm sayfaların, ek bir @import yönergesinin gerektirdiği gerekli yazı tipini seçmesidir.

Croc 4: bir stil yaratın

Öncü çizgilerden sonra yazı tipini sertleştirmeye başlayabilirsiniz. Bu CSS kuralını nasıl yazacağınızı zaten yazdınız:

P (yazı tipi ailesi: "Roboto", sans-serif; )

İlk adımda bir dizi görsel seçeneğini seçtiğiniz için (örneğin, Kalın 700 kalın yazı tipi seçeneğini eklediniz), üçüncü adımda kod biraz değişecektir:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Daha sonra yazı tipine kalın bir görüntü vermek için CSS stilini şu şekilde yazın:

P (yazı tipi ailesi: "Roboto", sans-serif; yazı tipi ağırlığı: 700; )

Not: Google Fonts'ta bir yazı tipinin yoğunluğunu belirtmek için yalnızca 100 ile 900 arasında değişen zihinsel birimler kullanılır. Dolayısıyla normal bir resim (satır arkası) 400'e (normal), standart kalın resim ise 700'e eşdeğerdir. (gözü pek).

Google Fonts hizmetinin ana avantajları şunlardır:

• kullanım kolaylığı (hizmeti yeni başlayan biri olarak kullanabilirsiniz ve gerekli tüm kod otomatik olarak oluşturulur - kopyalamaya gerek yoktur);
• yazı tiplerinin mevcudiyeti (onlar için ödeme yapmaya gerek yoktur);
• tüm yazı tipi formatlarının aktarılması (bu, tarayıcının çalıştığı yazı tipi formatının aynısını atayabileceği anlamına gelir).

Hizmetin eksiklikleri arasında başta Kiril olmak üzere yazı tiplerinin çeşitliliği yer alıyor. Konuşmadan önce internette benzer başka hizmetler de var, örneğin TypeKit (ücretli).

Torbalar

Bugün orijinal ve standart dışı yazı tiplerini web sayfalarına bağlamak için bir dizi seçeneğimiz var. Bu yöntemlerin her birinin kendine göre artıları ve eksileri vardır. Hangi seçeneğin alternatiften daha iyi olduğuna kendiniz karar vermelisiniz. Çoğu zaman duruma bağlı kalmak gerekir ve farklı durumlarda farklı yaklaşımlar söz konusu olabilir. Bu aşamada CSS'de yazı tiplerini nasıl değiştireceğinizi bilmeniz yeterli.