Bu video, yazı tiplerine başarıyla odaklanacak ve tabii ki eğlenmek ve bir web sayfası için yazı
tipleri seçmek gerçekten çok önemli.
Bununla birlikte, yazı tipleriyle ve metinle ilgili bir sürü diğer özellikleri de kapsayacağız.
Ve bunlar font ailesi font boyutu font ağırlık hattı yüksekliği metni bir çizgi ve metin dekorasyonudur.
Dolayısıyla bu videoda hepsini durdurup kapsamaya geldik.
Ve yapacağımız ilk şey, basit metni stile gideceğimize kadar elde etmektir.
Bu yüzden basit bir Funk'ın Jim M-dosyası var ve ben ilerleyip ağzınıza ekleyin.
Bu yüzden bir başlık ve stil görebilmek için sadece bir H-1 yapacağım.
Ve sonra bazı paragraflar.
Dolayısıyla sadece bu yazı tipinin demo sayfasını arayacağım ve daha sonra, bazı rasgele kelimeler veya bu
gibi İngilizcenin bir sayfada ne göründüğünü gerçekten yansıtmayan jibberish yazarak yazmak yerine bir
sonraki şeyden söz edeceğim.
Bir Lorem Epsom jeneratörü kullanacağım.
Lorem Ipsum jeneratörlerinin İngiliz kelimeleri olan bir grup rasgele metin üretmek için
kullanıldığını bilmeyenler için.
Hiçbir şey ifade etmiyor ama en azından gerçek sözcüklere benziyor.
Yani yer tutucu metin.
Bu yüzden, web tasarımcıları için en iyi veya en komik Lorem Ipsum jeneratörünün 10'u komik
yazı açık.
Ve ben sadece ilk bir pastırma ıpsum ile gidiyorum, bu yüzden burada birkaç paragraf üretmek için gidiyorum.
Hızlı.
Bana pastırma verin, görebilirsiniz ki bana biraz yazı vereceğim.
Ancak bu, gerçekte Web sitesinde sahip olabilecek bir şeyi bildiğiniz bir potansiyel gibi görünen gerçek
metindir.
Böyle jibberish gibi görünmüyor.
Dolayısıyla bir yazı tipinin daha iyi gösterimi var.
Bu yüzden devam edip içeri yapıştıracağım.
Bundan iki paragraf yapacağım.
Tamam.
Ve şimdilik bunun yanında bırakacağız ve geri dönüp biraz sonra ekleyeceğiz.
Hadi bunu açıp elimizde olanı görelim.
TAMAM.
Dolayısıyla, stil sahibi olacağımız bir site var ve yapmak istediğimiz ilk şey aslında
sadece bir şeye yazı tipi atamamız üzerine konuşmak.
Ve bunu yapmadan önce tarayıcıda hangi yazı tipini kullandığımızı konuşmak zorundayız.
Dolayısıyla, bir bilgisayarın tarayıcıda hangi yazı tiplerine sahip olduğu konusunda kolay bir yanıt yoktur.
Ve her makinede farklı oldukları için.
Ve bu siteyi burada açtım.
Yazı tipi yığını diyor.
Aslında bir Mac veya Windows kullanıyorsanız bağlı olarak gösterir.
Belli bir yazı tipine sahip olan bu makinelerin yüzdesi nedir?
Ve bu yüzden bunlar sadece çok fazla zaman göreceğimiz standart web yazı tipleri.
Helvetica'ya benzeyen birine bakarsak, her Mac'in Amerika'sına sahip olduğunu, ancak çok az windows yüklü olduğunu
görebilirsiniz.
Ve bu bir makinede gelen sistem yazı tipleri.
Dolayısıyla kullanabileceğiniz yazı tipleri bunlar değil ancak bunlar daha güvenli olan bahislerdir.
Dolayısıyla eğer isterse, Arial black veya anten gibi seçeceğiniz her
makinede çalıştığını biliyordu.
Açıkçası bu yazı tipleri oldukça sınırlı olsa da.
Bu nedenle, daha sonra bu videoda özel yazı tiplerini nasıl içerdiğimizi göreceğiz.
Fakat şimdi şimdilik bunlardan birini seçelim.
O zaman Ariel Sharon Ariel ile gidelim.
Bunu kullanmak için, bunu paragraflarımıza atayacağız.
Bu yüzden, burada bağladığım C S S'lerime gideceğim.
C S S ve mülkiyet stilleri font ailesi olarak adlandırılır.
Bu yüzden paragrafları seçeceğim ve font ailesi bunun gibi Arial olduğunu söyleyeceğim.
Yenilersem göreceksin, şimdi Arial yazı tipim var.
Bir hızlı not Ben de bu tamamen geçerli olan tırnak işaretleri koyabilirsiniz.
Bazen başında bir sayı olan bir fontunuz varsa bunu yapmak zorunda kalacaksınız.
Değil, bu gerçek bir yazı tipi değil ancak bu geçerli bir CSSA satırı olmadığı için
etrafında tırnak işareti koymak zorunda kalacaktı.
Tamam, böylece Aeriel verebilirim ve Aeriel'i aldığımızı görebilirsiniz.
Dolayısıyla, etrafınızda dolaşabileceğiniz başka yazı tipleri de var.
Gürcistan'ı deneyelim.
Öyleyse H-1
Gürcistan'ý tazeleme tezgahýnda yapalým.
Ve yazı tipini değiştiğini görebilirsiniz, bu nedenle tasarımcı iseniz umutsuzluğa düşmeyin.
Daha çok fontun nasıl kullanılacağını ve özel fontların nasıl kullanılacağını göreceğiz.
Ancak şu an için biraz sınırlı olan sistem varsayılan yazı tiplerine odaklanacağız.
Ve o zaman bile, makinelerin yüzde 100'ünün sahip olmadığı herhangi bir garanti olmadığı halde, konuşmak istediğim bir
sonraki özellik yazı tipi boyutu olduğu için, yazı tipi boyutu, yazı tipinin ne kadar büyük olduğunu
ya da ne kadar küçük yazı tipi belirli bir öğedir.
Bu yüzden bir şeyler seçip H-1'imize yapalım ve her birini daha büyük yapalım.
Dolayısıyla font boyutu yaparız ve kullanabileceğimiz farklı birimler vardır.
Ve birincisine piksel veya zirve denir ve biz onu Forder ile biraz önce gördük.
Bu yüzden 200 pics gibi büyük bir şey vereceğiz ve tarayıcıya geri
dönersek, bu dev eğlencenin 200 piksel olmasını sağlayabilir miyiz göreceğiz.
Yazı tipi boyutlarıyla oynamak isterseniz, bunun ne kadar büyük olmasını istediğinizi bilmiyorsunuz.
85'e değiştirebiliriz
veya ne istersek isteyebiliriz ve tarayıcıda gezebilir ve görebilirsiniz. değişiklik hemen yansıtılır.
İnceleyebiliriz ve sonra buraya gidebiliriz ve bunu tıklayabiliriz ve bu numarayı değiştirebiliriz, böylece biz de 100
veya 60 veya
Bu, yazı tipi boyutlarıyla oynarken çok güzel bir özelliktir.
Dolayısıyla, bahsettiğim gibi bir font boyutu seçmenin tek yolu bu değil.
Tek bir birim değil.
IEM'ler adı verilen popüler bir birim daha var ve E-M, temelde göreli bir yazı tipi boyutu.
Bu yüzden ilerleyip yazı tipi boyutunu M'ye getireceğim. burada bir EM değerinin dinamik olduğu ve EM'nin söz
konusu öğenin üst öğesine uygulanan yazı tipi boyutuna eşit olduğu bir an için buradan okuyacağım. .
D ve sayfaya gidin ve EM bölümüne gidin ve
Bunun anlamı aslında hızlı bir örnek göstereceğim.
Buraya şerit biftekle girelim, bir yayılma alanının hepsine bir yayılma unsuru
koyacağım.
Muhtemelen onları ilk gördüğümüz zamandır.
Aslında bir farkı görsel olarak üretmeden metinleri bir araya getirmek için bir yol mudur bu yüzden kelime şerit
biftek etrafında bir öğe türünde tür yapmanızın bir yolu.
Ama yenersem.
Hiçbir şey değişmiyor.
Eh, yazı tipi boyutu araması burada ama hiçbir şey değişir burada ve ben bu yayılma var.
Öyleyse, bazı çizgiyi vurgulamak veya tek tek çıkarmak ve ardından ona bir şeyler yapmak için bir yol.
Ve biz sadece onu daha da büyütmek için gidiyoruz.
Dolayısıyla bir E-M kullanırız veya E-M birimlerini kullanırız ve biz, bu paragrafın sadece bu bölüme
girdiğimiz paragrafın boyutunun iki katına çıkarmak istedik.
Öyleyse konuşalım ve sonra yalnızca yazı tipi boyutu 2 diyoruz. 0 E-M ve böylece bu paragraf olan ana öğenin çevreleyen öğesinin
yazı tipi boyutunun iki katına çıkacaktır.
Yani şunu göreceksin, burada bu alanı yenilersem bunun font boyutu iki katına çıkar.
Ancak biz aslında açıkça kaç piksel yapmak için bunu söylemedi.
Bunun ne kadar büyük olduğunu biliyordu ve daha sonra ikiye katladı.
Dolayısıyla bu dinamik, bu yüzden birçok insan böyle bir yazı tipi boyutunu
değiştirmeniz gerektiğinde bunun otomatik olarak değişeceğini düşünüyorum.
Öyleyse sana başka bir örnek göstereceğim.
Paragraf yazı tipi boyutunun yazı tipi
boyutunu artıralım ve bunları 40 piksel yapalım ve bunun hala iki kat kaldığını görebilirsiniz.
Öyleyse E-M hakkında çok şey uyandıran bir soru, v'nin başlangıç ​​değeri nedir ve en
üst seviye nedir.
Çünkü bir ebeveynden miras kalmaya devam edemeyiz ve ebeveynin bir miktar hakikat kaynağı olması gerekir.
Aslında bir yazı tipi boyutuna sahip ve aslında biraz sinir bozucu olan tarayıcıya bağlı olarak değişen
çok üst düzey öğesinde olduğu gibi olmalı.
Ancak SDN'ye göre genellikle 16 piksel dolayında olduğu için bu garanti değil, ancak genellikle 16 piksel
civarındadır.
Çoğu insanın yapacağı şey, başlangıçta vücut üzerinde bir yazı tipi boyutu ayarlamaktır.
Yani bu vücut font boyutu gibi bir şey.
Ve ona 10 piksel gibi başlamak için gerçekten küçük bir şeyler yapalım ve sonra vücudundan beş
kat daha geniş olması için bir veya daha fazla değiştirmemize izin verelim.
Bu, beş porno E-M gibi görünecek ve sonra paragraftan cesedin iki misli daha
büyük olacak.
Yani 2. 0 E-M.
Ve son olarak, genişliğimizin bir paragrafın iki katı kadar olmasını isteriz.
Yani bu da 2. 0 çünkü içeride iç içe geçmiş olduğunu unutmayın.
Öyleyse bir paragrafın ötesinde bazı metinler yapalım ve bunun oldukça küçük olduğunu göreceksiniz.
Sonra da bunu beş kat daha büyük yaptık.
Bunu iki kat daha büyük yaptık.
Ve bu paragrafın iki katı kadar büyük