Standart web yazı tipleri. Güvenli Yazı Tipleri

Düzeni dizmeye başlayarak, özellikle sayfada kullanılan yazı tiplerini CSS'de belirtmek gerekir. Tasarımcı genellikle sayfanın yalnızca ana metnini değil, aynı zamanda çeşitli başlıkları, logoları ve monogramları da yazmak için farklı yazı tiplerini kullanır.

İyi bir tasarımcı, iyi bir düzen tasarımcısı gibi, tarayıcının sayfayı görüntülemek için yalnızca kullanıcının bilgisayarında yüklü olan yazı tiplerini kullanabileceğini bilir. Yani, yazı tipleri kabaca iki kategoriye ayrılabilir:

1. Kullanıcıların büyük çoğunluğu için sorunsuz görüntülenecek yazı tipleri.
2. Yeterince büyük bir kullanıcı grubunun sahip olmadığı yazı tipleri.

Tasarımcı, örneğin bir logo veya büyük statik başlıklar oluşturmak için kategori 2 yazı tiplerini kullanmışsa, metni bir görüntüyle değiştirme tekniğini kullanmaktan çekinmemelisiniz. Bu tekniği kullanmanın dezavantajı esnek olmamasıdır. Metinde değişiklik olması durumunda, resmi yeniden yapmanız ve CSS'yi değiştirmeniz gerekecektir (örneğin, yeni resmin boyutları eskisiyle eşleşmiyorsa).

Tekniği doğrudan kullanmanın tehlikesi, metnin değişme olasılığına bağlı olduğunu söyleyebiliriz. Bu nedenle örneğin sayfanın genel metni standart olmayan fontlarla yapılamaz! İyi bir tasarımcı bunu asla yapmaz. Ve bir tasarımcı yeşile dönerse, iyi bir düzen tasarımcısı hatasını düzeltmekle yükümlüdür - düzende bu yazı tipini en benzer standart yazı tipiyle değiştirin.

Ancak ilk grubun yazı tiplerini ikinciden nasıl ayırt edebilirim? Doğrudan bilgisayarınıza yüklenmiş bir dizi yazı tipine güvenemeyeceğiniz açıktır! Anlayalım.

Standart yazı tipleri

Standart yazı tipleri, işletim sistemiyle birlikte yüklenen bir dizi yazı tipidir. İşletim sistemleri farklı olduğu için, farklı yazı tiplerine de sahiptirler. Windows'un farklı sürümleri için standart yazı tiplerinin bir listesi, örneğin, Standart Windows yazı tipleri makalesinde ve Mac OS ile sağlanan Yazı Tipleri sayfasındaki standart Mac OS yazı tiplerinin bir listesini bulunabilir. Unix/Linux işletim sistemlerine gelince, bunların tek bir yazı tipi seti yoktur. Birçok Linux kullanıcısı DejaVu yazı tipi setini kullanır, özellikle Ubuntu'da bunlar varsayılan olarak kurulur. http://www.codestyle.org istatistiklerine göre, birçok Unix/Linux kullanıcısında ayrıca URW, Free ve diğer yazı tipi setleri kuruludur. Aynı istatistiklere göre, Unix/Linux kullanıcılarının %60'ından fazlasının bilgisayarlarında, 2002 yılına kadar resmi olarak Microsoft web sitesinde ücretsiz olarak indirilebilen Web seti için Core yazı tiplerinden yazı tipleri bulunmaktadır.

Sayfanın herhangi bir işletim sisteminde tasarımcının amaçladığı şekilde görüntülenebilmesi için, font-family CSS özelliğinde virgülle ayrılmış birkaç font ayarlamak mümkündür.

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

1. Seçilen yazı tipi ailesinin adı. Örneğin "Times new Roman", "Arial" ve diğerleri. Boşluk içeren yazı tipi ailesi adları tırnak içine alınmalıdır. Tırnak yoksa, yazı tipi adından önceki ve sonraki boşluk karakterleri yok sayılır ve yazı tipi adının içindeki boşluk dizisi tek boşluğa dönüştürülür.
2. Genel (ortak) aile. Spesifikasyon aşağıdaki genel aileleri tanımlar:
   • serif - uçlarında serif bulunan yazı tipleri;
   • sans-serif - sans-serif yazı tipleri;
   • el yazısı - italik yazı tipleri;
   • fantezi - dekoratif yazı tipleri;
   • monospace - monospace yazı tipi (aynı genişlikte harflerle).

Genel aile adları anahtar sözcüklerdir ve tırnak içine alınmaları gerekmez.

Böylece, tasarım için OS Windows'tan standart bir yazı tipi alınır, Mac OS ve Unix / Linux için benzer bir yazı tipi seçilir, ortak bir yazı tipi ailesi belirlenir ve işiniz biter.

Ama her şey o kadar basit değil. Daha ayrıntılı olarak inceleyelim.

Web'de Güvenli Yazı Tipleri Arayışında

İnternette, tarihsel olarak "güvenli" Web yazı tipleri diye bir şey vardı. Güvenli yazı tipi, tüm işletim sistemlerinde standart olan bir yazı tipidir. Bu durum sadece hayal edilebileceğinden, kesinlikle güvenli yazı tipleri mevcut değildir!

Bazı yazı tipleri, bazı çekincelerle güvenli olarak adlandırılabilir.

"Güvenli" yazı tiplerinin tanımının temeli, diğer işletim sistemlerinde de kullanılan en yaygın Windows işletim sisteminin yazı tipleriydi. Bu kullanıma bir örnek, istatistiklere göre birçok Unix/Linux kullanıcısı tarafından indirilmiş olan Web yazı tipi paketi için daha önce bahsedilen Core yazı tipleridir.

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. Hepsi Runet için önemli olan Kiril alfabesini destekliyor.

Mac OS X'in standart teslimatında bulunan yazı tipi seti (bu işletim sistemi Mac OS kullanıcıları arasında en yaygın olanıdır), Web seti için Core yazı tiplerinden tüm yazı tiplerini içerir.

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

1. Arial
2. Arial Siyah
3. Komik Sans MS
4. Kurye Yeni
5. Gürcistan
6. Darbe
7. Times New Roman
8. Trebuchet MS
9. Verdana

Webdings yazı tipi bir dizi simge içerir ve bu nedenle içerik için kullanılamaz. Andale Mono, günlük ekran okuma için uygun olmadığı ve tüm Windows kullanıcılarının sahip olmadığı için yaygın olarak kullanılmamaktadır.

Her Windows kullanıcısı, Mac OS X kullanıcısı ve Unix/Linux kullanıcılarının büyük çoğunluğu (yani, Web paketi için Core yazı tiplerini yüklemiş olanlar) tüm bu yazı tiplerine sahiptir.

Ama geri kalanı ne olacak? Sonuçta, tasarımcının fikrinin mümkün olduğunca çok kullanıcı tarafından görülmesini istiyorum!

Kiril alfabesini destekleyen yazı tipleri

Runet'in belirli bir özelliği, sayfa kodlamaları ve yazı tiplerinde Kiril desteği ile ilgili sorundur. Çeşitli karakter kodlamalarıyla ilgili sorunlardan kaçınmak için akıllı insanlar, birkaç dilden karakterleri tek bir yazı tipinde birleştirmenize izin veren Unicode ile geldi. Bu nedenle, Rusça sayfalar için yalnızca Kiril'i destekleyen Unicode yazı tiplerini kullanmanız gerekir.

Aşağıda bir yazı tipi eşleme tablosu bulunmaktadır.

pencereler	Mac os işletim sistemi	Unix/Linux	genel aile
Arial Siyah	Helvetica CY	Nimbus Sans L	sans Serif
Arial	Helvetica CY	Nimbus Sans L	sans Serif
Komik Sans MS	Monako CY	* (aşağıya bakınız)	bitişik el yazısı
Kurye Yeni	* (aşağıya bakınız)	Nimbus Mono L	monospace
Gürcistan	* (aşağıya bakınız)	Yüzyıl Ders Kitabı L	şerif
Darbe	Kömür CY	* (aşağıya bakınız)	sans Serif
Times New Roman	Times CY	Nimbus Roman No9 L	şerif
Trebuchet MS	Helvetica CY	* (aşağıya bakınız)	sans Serif
Verdana	Cenevre CY	DejaVu Sans	sans Serif

* yazı tipinin karşısındaki sütunda bulunması, işletim sisteminin yazı tipinin yerel Kiril Windows eşdeğerlerine sahip olmadığı anlamına gelir. Ancak aynı zamanda, bu yazı tipinin kendisinin doğrudan işletim sistemine yüklenmesi olasılığı yüksektir.

Örneğin mizanpajın ana metni Arial ise, bu fontu tabloda buluyoruz ve buna karşılık gelen satırı CSS'de yazıyoruz:

gövde ( yazı tipi ailesi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

gövde ( font - family : Arial , "Helvetica CY" , "Nimbus Sans L" , sans - serif ;

Bu giriş, kullanıcı Arial yazı tipine sahipse (ve tüm Windows kullanıcıları ve tüm Mac OS X kullanıcıları varsa), sayfanın bu yazı tipinde görüntüleneceği anlamına gelir. Kullanıcıda bu yazı tipi yoksa, Mac OS 9'un Rusça konuşan kullanıcısının sayfası, standart Helvetica CY sistem yazı tipinde doğru bir şekilde görüntülenecek ve Unix/Linux kullanıcısı Nimbus Sans L yazı tipinde görüntülenecektir, Unix/Linux kullanıcılarının %90'ında kuruludur. Unix/Linux kullanıcısı bu yazı tipine sahip olmayan %10'luk kesime aitse, sayfa Web'de gezinme için varsayılan olarak ayarlanan serif yazı tipinde işlenecektir.

Tabloda Unix / Linux yazı tiplerinin dikkate alınmasına ek olarak, her zamanki Helvetica'dan sonra garip bir CY simgesi var. Ne olduğunu anlayalım!

Mac OS X'in piyasaya sürülmesinden önce, bu cetvel şu anlama geliyordu: Windows kullanıcıları için Arial sayfası görüntülenir, Mac OS 9 kullanıcıları için standart Helvetica yazı tipi ve geri kalanı sistem sans-serif yazı tipiyle sayfayı görür tarayıcıda varsayılan olarak yapılandırılır. Ama yine de, önemli bir nüans! Standart Mac OS 9 yazı tipi Helvetica'da Kiril alfabesi yoktur! Rusça dil sayfası için bu şu anlama geliyordu: Windows kullanıcıları için, Mac OS 9 kullanıcıları için Arial sayfasını - okunamayan bilgileri gösteren standart Helvetica yazı tipinde ve geri kalanı sayfayı sistem sans- tarayıcıda varsayılan olarak yapılandırılmış serif yazı tipi.

Bu setin Mac OS 9 kullanıcıları için doğru görüntülenmesi için, Kiril olmayan Helvetica yerine, Mac OS 9 için standart olan ve Kiril içeren aynı Helvetica CY yazı tipini belirtmek mantıklıdır.

Cetvellerin okunması, Mac OS X'in piyasaya sürülmesinden bu yana değişti. Windows/Mac OS X artık tek bir ortak standart yazı tipine sahiptir. Mac OS 9 kullanıcılarının tasarımcının fikrini görebilmesini istiyorsak, yazı tipi satırında Kiril içeren bir yazı tipi kaydetmeleri gerekir.

Yani güvenli yazı tipleri olmasa da güvenli yazı tipi satırları vardır. Onlar da denir CSS yazı tipi yığınları. Bu satırlar, standart Windows/Mac OS X yazı tiplerine ek olarak, standart Mac OS 9 setinden (varsayılan olarak "güvenli" yazı tipleri içermeyen) eşdeğer yazı tiplerini ve yaygın Unix/Linux yazı tiplerini de içerebilir.

Herhangi bir düzen tasarımcısı er ya da geç, tasarımcının düzende "güvenli" ; listesinde yer almayan bir yazı tipi kullandığı an ile karşı karşıya kalır. Ama bu alarmı çalmak için bir sebep değil! Örneğin, tasarımcılar bu listede yer almayan Tahoma yazı tipini düzenlerinde sıklıkla kullanırlar. Düzgün oluşturulmuş bir yazı tipi satırı, yalnızca Tahoma'yı değil, aynı zamanda diğer yazı tiplerini de kullanma olasılığını açar. Artan sayıda tasarımcı bu fırsattan yararlanıyor ve yetkin bir yerleşim tasarımcısı bunun farkında olmalıdır.

Aşağıda, "güvenli" listeye dahil edilmeyen ancak mizanpajlarda kullanılabilen ek bir yazı tipi tablosu bulunmaktadır.

pencereler	Mac os işletim sistemi	genel aile
Lucida Konsolu	Monako	monospace
Lucida Sans Unicode	Lucida Grande	sans Serif
Tahoma	Cenevre CY	sans Serif

Ve Kiril olmadan?

İngilizce metinler için yukarıdaki tablolar biraz farklı bir görünüme sahiptir.

pencereler	Mac os işletim sistemi	Unix/Linux	genel aile
Arial Siyah	gadget	Nimbus Sans L	sans Serif
Arial	Helvetica	Nimbus Sans L	sans Serif
Komik Sans MS	Monako	TSCu_Comic	bitişik el yazısı
Kurye Yeni	Kurye	Nimbus Mono L	monospace
Gürcistan	* (aşağıya bakınız)	Yüzyıl Ders Kitabı L	şerif
Darbe	Odun kömürü	Rekha	sans Serif
Times New Roman	Zamanlar	Nimbus Roman No9 L	şerif
Trebuchet MS	Helvetica	Garuda	sans Serif
Verdana	Cenevre	DejaVu Sans	sans Serif

Arial, Courier New ve Times New Roman yazı tipleri için, cetvelleri oluştururken yazı tipini önce Unix/Linux ve ardından Mac OS için belirtmek daha iyidir. Bu, Linux X11 çekirdek yazı tipi kümesinin bazı eğriliğinden kaynaklanmaktadır.

"Güvenli" listede olmayan ancak mizanpajlarda kullanılabilen yazı tipleri en iyi şekilde bu tabloya dayalı CSS yazı tipi yığınları ile tanımlanır.

pencereler	Mac os işletim sistemi	Unix/Linux	genel aile
Lucida Konsolu	Monako	-	monospace
Lucida Sans Unicode	Lucida Grande	Garuda	sans Serif
Palatino Linotipi	Palatino	Garuda**	sans Serif
Tahoma	Cenevre	Kalimati	sans Serif

Unix/Linux kutusundaki bir çizgi, bu işletim sistemlerinin kullanıcılarının, varsayılan olarak sayfaları görüntülemek için sayfanın yazı tipi ayarını görme olasılığının yüksek olduğunu gösterir.

** Bu satırda, Garuda yazı tipini Palatino'dan önce koymak mantıklıdır (yukarıdaki açıklamaya bakın).

Sonuçlar:

1. Kesinlikle güvenli yazı tipleri yoktur. Aşağıdaki yazı tipleri koşullu olarak güvenli olarak adlandırılabilir:
   • Arial
   • Arial Siyah
   • Komik Sans MS
   • Kurye Yeni
   • Gürcistan
   • Darbe
   • Times New Roman
   • Trebuchet MS
   • Verdana
2. Yazı tiplerinde Kiril desteğini dikkate alan güvenli CSS yığınları makalede bulunabilir.
3. Sayfada Kiril desteği önemli değilse, makaleden CSS yığınları kullanıyoruz.

Web tasarımının ana görevlerinden biri doğru seçimi yapmaktır. standart yazı tipleri. Google Web Fonts veya Typekit gibi font gömme hizmetleri, yeni bir şey sağlamak için alternatif olarak oluşturulmuştur.

Kullanımı çok kolaydır. Örnek olarak Google Web Fonts hizmetini ele alalım.

Open Sans , Droid Serif veya Lato yazı tipini seçin. Kodu yazın ve bir öğeye yapıştırın HTML belgesi. Her şey CSS'de referans gösterilmeye hazır! Tüm süreç 60 saniyeden fazla sürmedi. Ve her şey tamamen ücretsizdir.

Ne yanlış olabilir?

Bazı yazı tipleri herkes tarafından kullanılamayabilir. Ve bu, sorunlar olabileceği anlamına gelir. Site için güzel bir yazı tipi seçtiğiniz için mutlusunuz ve web sayfası ziyaretçisi bunun yerine çirkin karalamalar görüyor.

Bir yedekleme seçeneği uygularsanız bu olmaz.

Güvenli web yazı tiplerinin kullanımı ne kadar önemlidir?

Her aygıtın kendi önceden yüklenmiş yazı tipi vardır. Hangisi işletim sistemine bağlıdır. Sorun şu ki, aralarında küçük farklılıklar var.

Peki ya siteler? Örneğin, bu? Gördüğünüz yazı tipi, site için orijinal olarak öngörülen yazı tipi olmayabilir.

Bunun anlamı ne? Diyelim ki tasarımcı, site için ücretli bir yazı tipi ailesi seçti. Bunları yüklemediyseniz ve özel bir web hizmeti tarafından sağlanmadıysa, gördüğünüz yazı tipi standart seçeneklerden biridir. Örneğin, Times New Roman.

Bu nedenle, ekranınızda metin çok kötü görünebilir.

Fakat site için standart yazı tipleri tüm işletim sistemlerinde mevcuttur. Bu, Windows, Mac, Google ve Unix ve Linux'ta bulunan küçük bir koleksiyondur.

Bu seçimle, tasarımcılar ve site sahipleri yedek olarak hangi yazı tipinin kullanılacağını belirleyebilirler. Böylece sayfanın farklı cihazlarda nasıl görüneceğini kontrol etmek mümkün hale gelir.

Geri dönüş olarak geliştirici, orijinaline çok benzeyen bir yazı tipi seçer ve kullanıcıya gösterilir.

En popüler seçimlere bir göz atalım standart yazı tipleri HTML.

15 En İyi Güvenli Web Yazı Tipi

1. Arial

Çoğu durumda standart olarak kabul edilir. En yaygın yazı tipi sans Serif» veya sans-serif yazı tipleri ( Harflerin uçlarında serif olmayan). Genellikle Windows'ta diğer karakterleri değiştirmek için kullanılır.

1. Helvetica

Helvetica, tasarımcılar için bir cankurtarandır. Bu standart web yazı tipi neredeyse her zaman çalışır en azından diğer yazı tipleri için bir güvenlik ağı olarak).

1. Times New Roman

Arial'in sans-serif yazı tipleri için yaptığı gibi, serif yazı tipleri için aynı rolü görür. En popüler olanlardan biridir Windows cihazları. Bu, eski Times yazı tipinin güncellenmiş bir sürümüdür.

1. Zamanlar

css standart yazı tipi The Times çoğu kişiye tanıdık geliyor. Birçokları için eski gazetelerin dar sütunlarındaki küçük harflerle hatırlandı. Gelenek haline gelen en yaygın baskı türü.

1. Kurye Yeni

Times New Roman'a benzer ve eski klasiğin bir varyasyonu olarak kullanılır. Aynı zamanda tek aralıklı bir yazı tipi olarak kabul edilir. Serif ve sans-serif yazı tiplerinin aksine, tüm karakterleri aynı genişliğe sahiptir.

1. Kurye

Hemen hemen tüm cihazlarda ve işletim sistemlerinde yedek olarak kullanılan eski bir sabit genişlikli yazı tipi.

1. Verdana

Verdana haklı olarak gerçek bir web yazı tipi olarak kabul edilebilir ( gerçek web yazı tipi) büyük boyutun yanı sıra serif görevi gören basit çizgiler sayesinde. Harfleri biraz uzundur, bu nedenle ekranda okunması kolaydır.

1. Gürcistan

Standart web yazı tipi Georgia, şekil ve boyut olarak Verdana yazı tipine benzer. Karakterleri aynı boyuttaki diğer yazı tiplerinden daha büyüktür. Ancak başkalarıyla birlikte kullanmamak daha iyidir. Aynı Times New Roman, karşılaştırıldığında bir cüce gibi görünüyor.

1. Palatino

Palatino Rönesans'a aittir. Şaka yok. Bu, web için mükemmel olan başka bir büyük yazı tipidir. Genellikle manşetlerde ve reklamlarda kullanılır.

1. Garamond

16. yüzyılda Paris'te ortaya çıkan başka bir eski yazı tipi. Yeni ve geliştirilmiş sürümü çoğu Windows cihazında standarttır. Daha sonra bu yazı tipi diğer işletim sistemleri tarafından benimsenmiştir.

1. kitapçı

kitapçı ( veya Bookman Eski Stil) - biri en iyi standart yazı tipleri başlıklar için. Karakteristik özelliği, küçük bir boyut kullanıldığında bile okunabilir olmasıdır.

1. Komik Sans MS

Comic Sans MS, serif yazı tipleri için eğlenceli bir alternatiftir.

1. Trebuchet MS

Bu, orijinal olarak Microsoft Corporation tarafından doksanların ortalarında geliştirilen bir ortaçağ temalı yazı tipidir. Windows XP'de kullanıldı. Bugün, onun yardımıyla ana metni oluşturuyorlar.

1. Arial Siyah

analog site için standart yazı tipi Arial. Doğru, daha büyük, daha kalın ve daha sert. Helvetica yazı tipiyle orantılı olarak benzerdir. Ve önemli mi? Yapabilirler lisans satın almak zorunda kalmadan Helvetica'yı başarıyla değiştirin.

1. Darbe

Başlıkları vurgulamak için başka bir harika yazı tipi. Birkaç kelimeden oluşan kısa bir cümlede ve uzun cümlelerde iyi görünüyor.

Düzeni dizmeye başlayarak, özellikle sayfada kullanılan yazı tiplerini CSS'de belirtmek gerekir. Tasarımcı genellikle sayfanın yalnızca ana metnini değil, aynı zamanda çeşitli başlıkları, logoları ve monogramları da yazmak için farklı yazı tiplerini kullanır:

İyi bir tasarımcı, iyi bir düzen tasarımcısı gibi, tarayıcının sayfayı görüntülemek için yalnızca kullanıcının bilgisayarında yüklü olan yazı tiplerini kullanabileceğini bilir. Yani, yazı tipleri kabaca iki kategoriye ayrılabilir:

1. Kullanıcıların büyük çoğunluğu için sorunsuz görüntülenecek yazı tipleri.
2. Yeterince büyük bir kullanıcı grubunun sahip olmadığı yazı tipleri.

Tasarımcı, örneğin bir logo veya büyük statik başlıklar oluşturmak için kategori 2 yazı tiplerini kullanmışsa, . Bu tekniği kullanmanın dezavantajı esnek olmamasıdır. Metinde değişiklik olması durumunda, resmi yeniden yapmanız ve CSS'yi değiştirmeniz gerekecektir (örneğin, yeni resmin boyutları eskisiyle eşleşmiyorsa).

Tekniği doğrudan kullanmanın tehlikesi, metnin değişme olasılığına bağlı olduğunu söyleyebiliriz. Bu nedenle örneğin sayfanın genel metni standart olmayan fontlarla yapılamaz! İyi bir tasarımcı bunu asla yapmaz. Ve bir tasarımcı yeşile dönerse, iyi bir düzen tasarımcısı hatasını düzeltmekle yükümlüdür - düzende bu yazı tipini en benzer standart yazı tipiyle değiştirin.

Ancak ilk grubun yazı tiplerini ikinciden nasıl ayırt edebilirim? Doğrudan bilgisayarınıza yüklenmiş bir dizi yazı tipine güvenemeyeceğiniz açıktır! Anlayalım.

Standart yazı tipleri

Standart yazı tipleri, işletim sistemiyle birlikte yüklenen bir dizi yazı tipidir. İşletim sistemleri farklı olduğu için, farklı yazı tiplerine de sahiptirler. Windows'un farklı sürümleri için standart yazı tiplerinin bir listesi, örneğin, Standart Windows yazı tipleri makalesinde ve Mac OS ile sağlanan Yazı Tipleri sayfasındaki standart Mac OS yazı tiplerinin bir listesini bulunabilir. Unix/Linux işletim sistemlerine gelince, bunların tek bir yazı tipi seti yoktur. Birçok Linux kullanıcısı DejaVu yazı tipi setini kullanır, özellikle Ubuntu'da bunlar varsayılan olarak kurulur. http://www.codestyle.org istatistiklerine göre, birçok Unix/Linux kullanıcısında ayrıca URW, Free ve diğer yazı tipi setleri kuruludur. Aynı istatistiklere göre, Unix/Linux kullanıcılarının %60'ından fazlasının bilgisayarlarında, 2002 yılına kadar resmi olarak Microsoft web sitesinde ücretsiz olarak indirilebilen Web seti için Core yazı tiplerinden yazı tipleri bulunmaktadır.

Sayfanın tasarımcının istediği gibi görüntülenmesi için herhangi bir işletim sisteminde, CSS özelliğinde virgülle ayrılmış birkaç yazı tipi ayarlamak mümkündür.

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

1. Seçilen yazı tipi ailesinin adı. Örneğin "Times new Roman", "Arial" ve diğerleri. Boşluk içeren yazı tipi ailesi adları tırnak içine alınmalıdır. Tırnak yoksa, yazı tipi adından önceki ve sonraki boşluk karakterleri yok sayılır ve yazı tipi adının içindeki boşluk dizisi tek boşluğa dönüştürülür.
2. Genel (ortak) aile. Spesifikasyon aşağıdaki genel aileleri tanımlar:
   • serif - uçlarında serif bulunan yazı tipleri;
   • sans-serif - sans-serif yazı tipleri;
   • el yazısı - italik yazı tipleri;
   • fantezi - dekoratif yazı tipleri;
   • monospace - monospace yazı tipi (aynı genişlikte harflerle).
   Genel aile adları anahtar sözcüklerdir ve tırnak içine alınmaları gerekmez.

Böylece, tasarım için OS Windows'tan standart bir yazı tipi alınır, Mac OS ve Unix / Linux için benzer bir yazı tipi seçilir, ortak bir yazı tipi ailesi belirlenir ve işiniz biter.

Ama her şey o kadar basit değil. Daha ayrıntılı olarak inceleyelim.

Web'de Güvenli Yazı Tipleri Arayışında

İnternette, tarihsel olarak "güvenli" Web yazı tipleri diye bir şey vardı. Güvenli yazı tipi, tüm işletim sistemlerinde standart olan bir yazı tipidir. Böyle bir durum ancak hayal edilebileceğinden, o zaman Kesinlikle güvenli yazı tipleri mevcut değil!

Bazı yazı tipleri, bazı çekincelerle güvenli olarak adlandırılabilir.

"Güvenli" yazı tiplerinin tanımının temeli, diğer işletim sistemlerinde de kullanılan en yaygın Windows işletim sisteminin yazı tipleriydi. Bu kullanıma bir örnek, istatistiklere göre birçok Unix/Linux kullanıcısı tarafından indirilmiş olan Web yazı tipi paketi için daha önce bahsedilen Core yazı tipleridir.

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. Hepsi Runet için önemli olan Kiril alfabesini destekliyor.

Mac OS X'in standart teslimatında bulunan yazı tipi seti (bu işletim sistemi Mac OS kullanıcıları arasında en yaygın olanıdır), Web seti için Core yazı tiplerinden tüm yazı tiplerini içerir.

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

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

Webdings yazı tipi bir dizi simge içerir ve bu nedenle içerik için kullanılamaz. Andale Mono, günlük ekran okuma için uygun olmadığı ve tüm Windows kullanıcılarının sahip olmadığı için yaygın olarak kullanılmamaktadır.

Her Windows kullanıcısı, Mac OS X kullanıcısı ve Unix/Linux kullanıcılarının büyük çoğunluğu (yani, Web paketi için Core yazı tiplerini yüklemiş olanlar) tüm bu yazı tiplerine sahiptir.

Ama geri kalanı ne olacak? Sonuçta, tasarımcının fikrinin mümkün olduğunca çok kullanıcı tarafından görülmesini istiyorum!

Yayının ikinci bölümünde bu konuda okuyun.

Yazı tipleri, bireyselliğini vurgulayan, web sitesi tasarımının ayrılmaz ve çok önemli bir parçasıdır. Makale standart yazı tiplerini bir web sayfasına bağlama hakkında konuşacak, bunlara sistem yazı tipleri de deniyor ve bir sonraki makalede Google Yazı Tiplerinden yazı tiplerini seçmeye ve bir WordPress sitesine bağlamaya daha yakından bakacağız.

Sistem, standart, güvenli yazı tipleri

Herhangi bir tarayıcı, yalnızca bilgisayarın işletim sisteminde bulunan yazı tiplerini görüntüler. Bu nedenle, sistem olarak adlandırılırlar ve varsayılan olarak işletim sistemiyle birlikte yüklenirler.

Ve bunlara güvenli yazı tipleri denir, çünkü yüksek olasılıkla çoğu site ziyaretçisinin tarayıcısında görüntülenecektir.

Ancak tüm sorun, farklı işletim sistemlerine farklı yazı tiplerinin yüklenmesi gerçeğinde yatmaktadır. Sağlanan yazı tiplerini işletim sistemiyle birlikte Windows, Mac OS'nin resmi sayfalarında görüntüleyebilirsiniz. Ve Unix/Linux'ta hiçbir standart seti yoktur.

Web sayfasının tasarımcının fikrine uygun olarak görüntülenebilmesi için CSS'de font-family adlı bir font özelliği ayarlandı.

yazı tipi ailesi yazı tipi özelliği

Font-family özelliği — belirli özelliklere göre gruplandırılmış font aileleri.

Genel aileler:

• serif - uçlarında serif bulunan yazı tipleri;
• sans-serif - sans-serif yazı tipleri;
• el yazısı - italik yazı tipleri;
• fantezi - dekoratif yazı tipleri;
• monospace - monospace yazı tipi (aynı genişlikte harflerle).

Böylece farklı işletim sistemlerinden benzer yazı tipleri basitçe seçilir ve virgülle ayrılmış web sayfasına bağlanır.

İşte sadece görsel algı için bir örnek. Yazı tiplerini doğrudan bağlamayı düşündüğümüzde bu örneğe döneceğiz.

Sadece mantığı takip edin ve her şey çok netleşecek.

Gövde ( yazı tipi ailesi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

Yazılanlara bir göz atalım:

• OC Pencereleri - Arial;
• OC Mac OS - Helvetica CY;
• OC Unix/Linux - Nimbus Sans L;
• Jenerik aile sans-serif'tir.

Sözde güvenli yazı tipleri

OC Windows'a dayalı olarak, birkaç güvenli yazı tipinin bir listesi derlendi.

1. Arial
2. Arial Siyah
3. Komik Sans MS
4. Kurye Yeni
5. Gürcistan
6. Darbe
7. Times New Roman
8. Trebuchet MS
9. Verdana

Bu yazı tiplerinin tümü, Mac OS X, Windows ve Web paketi için Core yazı tiplerine sahip birçok Unix/Linux kullanıcısına yüklenir.

Diğer kullanıcılar için bir yazışma tablosu sağlanır. Belirli bir aileye ait benzer yazı tiplerini alır.

Yazışma tablosu ve yazı tiplerinin belirli bir aileye ait olması:

pencereler	Mac os işletim sistemi	Unix/Linux	genel aile
Arial Siyah	Helvetica CY	Nimbus Sans L	sans Serif
Arial	Helvetica CY	Nimbus Sans L	sans Serif
Komik Sans MS	Monako CY	* (aşağıya bakınız)	bitişik el yazısı
Kurye Yeni	* (aşağıya bakınız)	Nimbus Mono L	monospace
Gürcistan	* (aşağıya bakınız)	Yüzyıl Ders Kitabı L	şerif
Darbe	Kömür CY	* (aşağıya bakınız)	sans Serif
Times New Roman	Times CY	Nimbus Roman No9 L	şerif
Trebuchet MS	Helvetica CY	* (aşağıya bakınız)	sans Serif
Verdana	Cenevre CY	DejaVu Sans	sans Serif

* Yazı tiplerini bağlarken buna güvenle güvenebilirsiniz. Tablo Kiril karakterlerini, Rus alfabesini destekler.
Bu yazıda tablonun kendisini aldım.

Sistem yazı tiplerini siteye bağlama

Bir siteye sistem yazı tiplerini bağlamanın birkaç yolu vardır. Ayrıca farklı yazı tiplerini farklı paragraflara bağlayabilirsiniz. Tek tek kelimelere ve ifadelere farklı yazı tipleri uygulayın. Bütün bunları şimdi düşünmeye çalışacağım.
Öyleyse doğru anlayalım.

Bir CSS Dosyasına Yazı Tiplerini Dahil Etme

Bağlanmanız gerekirse tüm belge için ana yazı tipi, stil sayfasına aşağıdaki kodu eklemeniz yeterlidir:

Gövde ( yazı tipi ailesi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* yazı tipini tüm belgeye bağlayın */ yazı tipi boyutu: 16 piksel; /* ayrıca yazı tipi boyutunu ayarlayın */ yazı tipi -ağırlık: 400; /* yazı tipinin kalınlığını ayarlayın veya 400 yerine değeri - normal olarak ayarlayın */ )

Başlıklar için bir yazı tipi atama H1, H2, H3, H4, H5, H6, (burada benzer, sadece başlıkları vurgulamak için koyuluk değerini ayarlıyoruz):

H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* fontu başlıklara bağla */ font-weight: 600; /* set yazı tipinin kalınlığı veya 600 yerine değeri ayarlayın - kalın */ )

Yazı tipini yalnızca paragraflara atayın:

P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* fontu paragraflara bağla, li listelerine, div'lere, formlara ve diğer öğelere uygulanabilir */ font-weight: normal; /* yazı tipinin kalınlığını ayarlayın veya 600 yerine değeri - kalın */ yazı tipi boyutu: 16 piksel; /* ayrıca paragraflar için yazı tipi boyutunu ayarlayın */ )

İle sadece belirli bir paragrafa yazı tipi atayın, veya blok, önce HTML belgesinde bu bloğa bir sınıf atamanız gerekir.

İşte atanabilir yazı tipine sahip bir paragraf

Ve CSS tablosuna aşağıdaki kodu yazın:

Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* fontu belirli paragraflara bağla, bireysel lis, divs, form ve diğer öğelere uygulanabilir */ font-weight : normal; /* yazı tipinin ağırlığını ayarlayın veya 600 yerine değeri ayarlayın - kalın */ yazı tipi boyutu: 16 piksel; /* ayrıca paragraflar için yazı tipi boyutunu ayarlayın */ )

Şimdi, .font sınıfına sahip her bir html öğesi etiketine (ne isterseniz onu adlandırın) Arial yazı tipi, normal (400), kalın ve 16 piksel boyutunda atanacaktır.
Benzer şekilde, li listelerine, tablo tablolarına, tüm div bloklarına, tek tek sözcüklere veya tümcelere farklı yazı tipleri atayabilirsiniz.

Bir HTML belgesindeki yazı tiplerini bağlama

Doğrudan bir HTML belgesinde, yazı tipleri bir CSS dosyasıyla aynı şekilde bağlanır, fark yalnızca sözdizimindedir. Yazı tiplerini belgenin başlığına - etiketler arasına ekleyebilirsiniz. (bir CSS dosyasına benzer) veya satır içi - özellikleri doğrudan html etiketlerine atama.

Başlığa yazı tipi ekleme, etiketler arasında . Bunu yapmak için html belgesine aşağıdaki kodu ekleyin:

Burada kendimi tekrar etmeyeceğim. Her şey bir CSS dosyasına bağlanmaya benzer.

Yazı tiplerini satır içi bağlama, doğrudan site öğelerine. İşte bazı örnekler:

Yazı tipini paragrafa bağlama

İşte metin içeren bir paragraf

Tek bir kelimeyi kalın yazı tipiyle vurgulayın ve ana yazı tipinden ayrı bir yazı tipi atayın

İşte metin içeren bir paragraf ve bu kelime kalın olarak vurgulanacak

Bağlantı burada

Benzer şekilde, herhangi bir html etiketine yazı tipi atarız.

Ancak yine de en iyisidir ve öğeleri bir CSS dosyası aracılığıyla biçimlendirmeniz önerilir. İlk olarak, CSS'de stilleri yalnızca bir kez yazmanız ve ardından HTML'de yalnızca istediğiniz sınıfı atamanız gerekir. İkinci olarak, satır içi stiller yazmak, yinelenen içerik oluşturur. Bu özellikler ve sınıflar arama motorları tarafından indekslenmiş gibi görünüyor ve W3C'nin satır içi tamamen iptal etmek istediğini duydum. Her ne kadar bazen stilleri bu şekilde yazmak daha kolay olsa da.

Herşey. Site güncellemeleri için takipte kalın, standart dışı ve orijinal fontların tüm tarayıcılarda düzgün görüntülenmesi için siteye bağlanmasıyla ilgili bir makale hazırlıyorum. Ayrıca sizi standart olmayan yazı tiplerini seçebileceğiniz birkaç iyi hizmetle tanıştıracağım.

Bu liste, mevcut tüm Windows işletim sistemlerinde (aslında Windows 98'den başlayarak) ve bunların Mac OS eşdeğerlerinde ortak olan yazı tiplerini içerir. Bu tür yazı tiplerine bazen "tarayıcı için güvenli yazı tipleri" denir ( tarayıcı güvenli yazı tipleri). Web sayfaları yaparken kullandığım küçük bir referans kitabı bu ve sizin için de faydalı olacağını düşünüyorum.

Web tasarımında yeniyseniz, “Neden kendimi bu kadar küçük bir yazı tipi seçimiyle sınırlandırayım? Güzel yazı tiplerinden oluşan büyük bir koleksiyonum var!” Gerçek şu ki, ziyaretçinin tarayıcısı yalnızca yüklü olan yazı tiplerini görüntüleyebilir. onun içinde işletim sistemi ( yaklaşık çevirmen:şu anda, sayfaların tasarımında ve yeni özelliğinde hemen hemen her yazı tipini uygulamak zaten mümkün. @ yazı tipi-yüz; ancak, tüm tarayıcılar henüz bu işlevi desteklememektedir), yani her biri sayfanızın ziyaretçisi, seçtiğiniz yazı tiplerinin sahibi olmalıdır. Bu nedenle, yalnızca her işletim sisteminde bulunan yazı tiplerini kullanmalısınız. Neyse ki, CSS'nin bir özelliği var @font ailesi, bu görevi kolaylaştırır.

Liste

@font-family'nin anlamı	pencereler	Mac	Aile
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans Serif
"Arial Black", Gadget, sans-serif	Arial Siyah	Arial Siyah Gadget'ı	sans Serif
Komik Sans MS el yazısı	Komik Sans MS	Komik Sans MS 5	bitişik el yazısı
"Kurye Yeni", Kurye, monospace	Kurye Yeni	Kurye Yeni, Kurye 6	monospace
Gürcistan, Şerif	Gürcistan 1	Gürcistan	serif
Darbe, Kömür, sans-serif	Darbe	Darbe 5, Kömür 6	sans Serif
"Lucida Konsolu", Monako, monospace	Lucida Konsolu	Monako 5	monospace
"Lucida Sans Unicode", "Lucida Grande", sans-serif	Lucida Sans Unicode	Lucida Grande	sans Serif
"Palatino Linotype", "Kitap Antiqua", Palatino, serif	Palatino Linotype, Kitap Antiqua 3	Palatino 6	serif
Tahoma, Cenevre, sans-serif	Tahoma	Cenevre	sans Serif
"Times New Roman", Times, serif	Times New Roman	Zamanlar	serif
"Trebuchet MS", Helvetica, sans-serif	Mancınık MS 1	Helvetica	sans Serif
Verdana, Cenevre, sans-serif	Verdana	Verdana, Cenevre	sans Serif
sembol	Sembol 2	Sembol 2	-
ağlar	ağ 2	ağ 2	-
Kanatlar, "Zapf Dingbats"	kanatlar 2	Zapf Dingbats 2	-
"MS Sans Serif", Cenevre, sans-serif	MS Sans Serif 4	Cenevre	sans Serif
"MS Serif", "New York", serif	MS Serif 4	New York 6	serif

1 Georgia ve Trebuchet MS yazı tipleri Windows 2000/XP ile birlikte gelir ve IE yazı tipi paketine dahil edilmiştir (ve aslında birçok Microsoft uygulamasına dahil edilmiştir), bu nedenle birçok Windows 98 bilgisayarına kurulurlar.

2 Sembol yazı tipleri yalnızca Internet Explorer'da görüntülenir, diğer tarayıcılarda genellikle standart bir yazı tipiyle değiştirilirler (örneğin, Sembol yazı tipi Opera'da ve Webdings - Safari'de görüntülenmesine rağmen).

3 Book Antiqua, Palatino Linotype ile hemen hemen aynıdır; Palatino Linotype, Windows 2000/XP ile birlikte gelir ve Book Antiqua, Windows 98 ile birlikte gelir.

4 Lütfen bu yazı tiplerinin TrueType değil bitmap olduğunu ve bu nedenle bazı boyutlarda kötü görünebileceklerini unutmayın (96 DPI'da 8, 10, 12, 14, 18 ve 24 pt'de görüntülenecek şekilde tasarlanmıştır).

5 Bu yazı tipleri yalnızca Safari'deki standart yazı tiplerinde çalışır, ancak kalın veya italik olarak çalışmaz. Comic Sans MS ayrıca kalın harflerle çalışır ancak italik olarak çalışmaz. Diğer Mac tarayıcıları, eksik yazı tipi özelliklerini kendi başlarına taklit etmekte iyi görünüyorlar (bahşiş için Christian Fecteau'ya teşekkürler).

6 Bu yazı tipleri yalnızca Klasik yükleme sırasında Mac'e yüklenir

Ekran görüntüleri

• Mac OS X 10.4.8, Firefox 2.0, ClearType etkin (ekran görüntüsü için Juris Vecvanags'a teşekkürler)
• Mac OS X 10.4.4, Firefox 1.5, ClearType etkin
• Mac OS X 10.4.11, Safari 3.0.4, ClearType etkin (ekran görüntüsü için Nolan Gladius'a teşekkürler)
• Mac OS X 10.4.4, Safari 2.0.3, ClearType etkin (ekran görüntüsü için Eric Zavesky'ye teşekkürler)
• Windows Vista, Internet Explorer 7, ClearType etkin
• Windows Vista, Firefox 2.0, ClearType etkin (ekran görüntüsü için Michiel Bijl'e teşekkürler)