1
00:00:01,020 --> 00:00:07,590
Bu video, yazı tiplerine başarıyla odaklanacak ve tabii ki eğlenmek ve bir web sayfası için yazı

2
00:00:07,580 --> 00:00:09,880
tipleri seçmek gerçekten çok önemli.

3
00:00:10,110 --> 00:00:14,660
Bununla birlikte, yazı tipleriyle ve metinle ilgili bir sürü diğer özellikleri de kapsayacağız.

4
00:00:14,730 --> 00:00:23,470
Ve bunlar font ailesi font boyutu font ağırlık hattı yüksekliği metni bir çizgi ve metin dekorasyonudur.

5
00:00:23,610 --> 00:00:26,530
Dolayısıyla bu videoda hepsini durdurup kapsamaya geldik.

6
00:00:26,730 --> 00:00:32,670
Ve yapacağımız ilk şey, basit metni stile gideceğimize kadar elde etmektir.

7
00:00:33,030 --> 00:00:39,080
Bu yüzden basit bir Funk'ın Jim M-dosyası var ve ben ilerleyip ağzınıza ekleyin.

8
00:00:39,080 --> 00:00:42,660
Bu yüzden bir başlık ve stil görebilmek için sadece bir H-1 yapacağım.

9
00:00:42,750 --> 00:00:44,180
Ve sonra bazı paragraflar.

10
00:00:44,490 --> 00:00:51,720
Dolayısıyla sadece bu yazı tipinin demo sayfasını arayacağım ve daha sonra, bazı rasgele kelimeler veya bu

11
00:00:51,720 --> 00:00:57,450
gibi İngilizcenin bir sayfada ne göründüğünü gerçekten yansıtmayan jibberish yazarak yazmak yerine bir

12
00:00:57,450 --> 00:00:59,580
sonraki şeyden söz edeceğim.

13
00:00:59,620 --> 00:01:02,610
Bir Lorem Epsom jeneratörü kullanacağım.

14
00:01:02,610 --> 00:01:08,640
Lorem Ipsum jeneratörlerinin İngiliz kelimeleri olan bir grup rasgele metin üretmek için

15
00:01:08,730 --> 00:01:09,980
kullanıldığını bilmeyenler için.

16
00:01:09,990 --> 00:01:13,550
Hiçbir şey ifade etmiyor ama en azından gerçek sözcüklere benziyor.

17
00:01:13,560 --> 00:01:15,570
Yani yer tutucu metin.

18
00:01:16,110 --> 00:01:23,310
Bu yüzden, web tasarımcıları için en iyi veya en komik Lorem Ipsum jeneratörünün 10'u komik

19
00:01:23,310 --> 00:01:24,350
yazı açık.

20
00:01:24,570 --> 00:01:30,480
Ve ben sadece ilk bir pastırma ıpsum ile gidiyorum, bu yüzden burada birkaç paragraf üretmek için gidiyorum.

21
00:01:31,560 --> 00:01:31,910
Hızlı.

22
00:01:31,920 --> 00:01:34,370
Bana pastırma verin, görebilirsiniz ki bana biraz yazı vereceğim.

23
00:01:34,470 --> 00:01:41,080
Ancak bu, gerçekte Web sitesinde sahip olabilecek bir şeyi bildiğiniz bir potansiyel gibi görünen gerçek

24
00:01:41,070 --> 00:01:41,670
metindir.

25
00:01:41,700 --> 00:01:43,430
Böyle jibberish gibi görünmüyor.

26
00:01:43,440 --> 00:01:45,890
Dolayısıyla bir yazı tipinin daha iyi gösterimi var.

27
00:01:46,110 --> 00:01:48,010
Bu yüzden devam edip içeri yapıştıracağım.

28
00:01:48,120 --> 00:01:52,100
Bundan iki paragraf yapacağım.

29
00:01:54,140 --> 00:01:54,570
Tamam.

30
00:01:54,570 --> 00:01:59,510
Ve şimdilik bunun yanında bırakacağız ve geri dönüp biraz sonra ekleyeceğiz.

31
00:01:59,670 --> 00:02:02,580
Hadi bunu açıp elimizde olanı görelim.

32
00:02:03,300 --> 00:02:03,720
TAMAM.

33
00:02:03,750 --> 00:02:08,670
Dolayısıyla, stil sahibi olacağımız bir site var ve yapmak istediğimiz ilk şey aslında

34
00:02:09,030 --> 00:02:11,840
sadece bir şeye yazı tipi atamamız üzerine konuşmak.

35
00:02:12,180 --> 00:02:17,790
Ve bunu yapmadan önce tarayıcıda hangi yazı tipini kullandığımızı konuşmak zorundayız.

36
00:02:18,510 --> 00:02:23,370
Dolayısıyla, bir bilgisayarın tarayıcıda hangi yazı tiplerine sahip olduğu konusunda kolay bir yanıt yoktur.

37
00:02:23,550 --> 00:02:26,420
Ve her makinede farklı oldukları için.

38
00:02:26,670 --> 00:02:28,360
Ve bu siteyi burada açtım.

39
00:02:28,640 --> 00:02:30,070
Yazı tipi yığını diyor.

40
00:02:30,270 --> 00:02:34,250
Aslında bir Mac veya Windows kullanıyorsanız bağlı olarak gösterir.

41
00:02:34,350 --> 00:02:38,280
Belli bir yazı tipine sahip olan bu makinelerin yüzdesi nedir?

42
00:02:38,670 --> 00:02:42,820
Ve bu yüzden bunlar sadece çok fazla zaman göreceğimiz standart web yazı tipleri.

43
00:02:42,840 --> 00:02:51,030
Helvetica'ya benzeyen birine bakarsak, her Mac'in Amerika'sına sahip olduğunu, ancak çok az windows yüklü olduğunu

44
00:02:51,450 --> 00:02:52,130
görebilirsiniz.

45
00:02:52,290 --> 00:02:55,430
Ve bu bir makinede gelen sistem yazı tipleri.

46
00:02:55,950 --> 00:03:00,650
Dolayısıyla kullanabileceğiniz yazı tipleri bunlar değil ancak bunlar daha güvenli olan bahislerdir.

47
00:03:00,660 --> 00:03:05,790
Dolayısıyla eğer isterse, Arial black veya anten gibi seçeceğiniz her

48
00:03:06,270 --> 00:03:07,590
makinede çalıştığını biliyordu.

49
00:03:08,160 --> 00:03:10,310
Açıkçası bu yazı tipleri oldukça sınırlı olsa da.

50
00:03:10,350 --> 00:03:14,030
Bu nedenle, daha sonra bu videoda özel yazı tiplerini nasıl içerdiğimizi göreceğiz.

51
00:03:14,130 --> 00:03:16,230
Fakat şimdi şimdilik bunlardan birini seçelim.

52
00:03:16,260 --> 00:03:19,750
O zaman Ariel Sharon Ariel ile gidelim.

53
00:03:20,010 --> 00:03:24,720
Bunu kullanmak için, bunu paragraflarımıza atayacağız.

54
00:03:25,370 --> 00:03:27,700
Bu yüzden, burada bağladığım C S S'lerime gideceğim.

55
00:03:27,720 --> 00:03:31,840
C S S ve mülkiyet stilleri font ailesi olarak adlandırılır.

56
00:03:32,040 --> 00:03:40,820
Bu yüzden paragrafları seçeceğim ve font ailesi bunun gibi Arial olduğunu söyleyeceğim.

57
00:03:41,060 --> 00:03:46,390
Yenilersem göreceksin, şimdi Arial yazı tipim var.

58
00:03:46,410 --> 00:03:51,830
Bir hızlı not Ben de bu tamamen geçerli olan tırnak işaretleri koyabilirsiniz.

59
00:03:51,840 --> 00:03:57,200
Bazen başında bir sayı olan bir fontunuz varsa bunu yapmak zorunda kalacaksınız.

60
00:03:57,200 --> 00:04:02,160
Değil, bu gerçek bir yazı tipi değil ancak bu geçerli bir CSSA satırı olmadığı için

61
00:04:02,160 --> 00:04:04,360
etrafında tırnak işareti koymak zorunda kalacaktı.

62
00:04:04,830 --> 00:04:10,660
Tamam, böylece Aeriel verebilirim ve Aeriel'i aldığımızı görebilirsiniz.

63
00:04:10,830 --> 00:04:12,970
Dolayısıyla, etrafınızda dolaşabileceğiniz başka yazı tipleri de var.

64
00:04:12,990 --> 00:04:16,340
Gürcistan'ı deneyelim.

65
00:04:16,800 --> 00:04:19,290
Öyleyse H-1

66
00:04:24,150 --> 00:04:28,520
Gürcistan'ý tazeleme tezgahýnda yapalým.

67
00:04:28,860 --> 00:04:33,100
Ve yazı tipini değiştiğini görebilirsiniz, bu nedenle tasarımcı iseniz umutsuzluğa düşmeyin.

68
00:04:33,120 --> 00:04:36,810
Daha çok fontun nasıl kullanılacağını ve özel fontların nasıl kullanılacağını göreceğiz.

69
00:04:37,110 --> 00:04:42,390
Ancak şu an için biraz sınırlı olan sistem varsayılan yazı tiplerine odaklanacağız.

70
00:04:42,600 --> 00:04:48,780
Ve o zaman bile, makinelerin yüzde 100'ünün sahip olmadığı herhangi bir garanti olmadığı halde, konuşmak istediğim bir

71
00:04:51,570 --> 00:04:57,370
sonraki özellik yazı tipi boyutu olduğu için, yazı tipi boyutu, yazı tipinin ne kadar büyük olduğunu

72
00:04:57,490 --> 00:05:00,990
ya da ne kadar küçük yazı tipi belirli bir öğedir.

73
00:05:01,240 --> 00:05:07,230
Bu yüzden bir şeyler seçip H-1'imize yapalım ve her birini daha büyük yapalım.

74
00:05:07,590 --> 00:05:12,460
Dolayısıyla font boyutu yaparız ve kullanabileceğimiz farklı birimler vardır.

75
00:05:12,450 --> 00:05:18,170
Ve birincisine piksel veya zirve denir ve biz onu Forder ile biraz önce gördük.

76
00:05:18,330 --> 00:05:25,770
Bu yüzden 200 pics gibi büyük bir şey vereceğiz ve tarayıcıya geri

77
00:05:25,770 --> 00:05:31,740
dönersek, bu dev eğlencenin 200 piksel olmasını sağlayabilir miyiz göreceğiz.

78
00:05:31,750 --> 00:05:35,640
Yazı tipi boyutlarıyla oynamak isterseniz, bunun ne kadar büyük olmasını istediğinizi bilmiyorsunuz.

79
00:05:35,680 --> 00:05:36,610
85'e değiştirebiliriz

80
00:05:40,410 --> 00:05:46,470
veya ne istersek isteyebiliriz ve tarayıcıda gezebilir ve görebilirsiniz. değişiklik hemen yansıtılır.

81
00:05:46,470 --> 00:05:55,190
İnceleyebiliriz ve sonra buraya gidebiliriz ve bunu tıklayabiliriz ve bu numarayı değiştirebiliriz, böylece biz de 100

82
00:05:55,200 --> 00:05:57,010
veya 60 veya

83
00:05:57,270 --> 00:06:01,570
Bu, yazı tipi boyutlarıyla oynarken çok güzel bir özelliktir.

84
00:06:01,560 --> 00:06:06,310
Dolayısıyla, bahsettiğim gibi bir font boyutu seçmenin tek yolu bu değil.

85
00:06:06,450 --> 00:06:07,650
Tek bir birim değil.

86
00:06:07,900 --> 00:06:15,730
IEM'ler adı verilen popüler bir birim daha var ve E-M, temelde göreli bir yazı tipi boyutu.

87
00:06:15,840 --> 00:06:23,250
Bu yüzden ilerleyip yazı tipi boyutunu M'ye getireceğim. burada bir EM değerinin dinamik olduğu ve EM'nin söz

88
00:06:23,250 --> 00:06:29,790
konusu öğenin üst öğesine uygulanan yazı tipi boyutuna eşit olduğu bir an için buradan okuyacağım. .

89
00:06:29,790 --> 00:06:33,500
D ve sayfaya gidin ve EM bölümüne gidin ve

90
00:06:33,880 --> 00:06:36,900
Bunun anlamı aslında hızlı bir örnek göstereceğim.

91
00:06:37,320 --> 00:06:47,580
Buraya şerit biftekle girelim, bir yayılma alanının hepsine bir yayılma unsuru

92
00:06:47,580 --> 00:06:48,120
koyacağım.

93
00:06:48,120 --> 00:06:50,300
Muhtemelen onları ilk gördüğümüz zamandır.

94
00:06:50,380 --> 00:06:57,510
Aslında bir farkı görsel olarak üretmeden metinleri bir araya getirmek için bir yol mudur bu yüzden kelime şerit

95
00:06:57,510 --> 00:07:01,050
biftek etrafında bir öğe türünde tür yapmanızın bir yolu.

96
00:07:01,050 --> 00:07:03,470
Ama yenersem.

97
00:07:03,510 --> 00:07:04,710
Hiçbir şey değişmiyor.

98
00:07:04,750 --> 00:07:09,230
Eh, yazı tipi boyutu araması burada ama hiçbir şey değişir burada ve ben bu yayılma var.

99
00:07:09,780 --> 00:07:13,540
Öyleyse, bazı çizgiyi vurgulamak veya tek tek çıkarmak ve ardından ona bir şeyler yapmak için bir yol.

100
00:07:13,550 --> 00:07:15,620
Ve biz sadece onu daha da büyütmek için gidiyoruz.

101
00:07:16,020 --> 00:07:22,890
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

102
00:07:22,890 --> 00:07:26,380
girdiğimiz paragrafın boyutunun iki katına çıkarmak istedik.

103
00:07:26,520 --> 00:07:38,290
Ö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

104
00:07:38,460 --> 00:07:41,940
yazı tipi boyutunun iki katına çıkacaktır.

105
00:07:41,940 --> 00:07:49,220
Yani şunu göreceksin, burada bu alanı yenilersem bunun font boyutu iki katına çıkar.

106
00:07:49,240 --> 00:07:53,170
Ancak biz aslında açıkça kaç piksel yapmak için bunu söylemedi.

107
00:07:53,160 --> 00:07:56,430
Bunun ne kadar büyük olduğunu biliyordu ve daha sonra ikiye katladı.

108
00:07:56,440 --> 00:08:02,430
Dolayısıyla bu dinamik, bu yüzden birçok insan böyle bir yazı tipi boyutunu

109
00:08:02,440 --> 00:08:05,930
değiştirmeniz gerektiğinde bunun otomatik olarak değişeceğini düşünüyorum.

110
00:08:06,190 --> 00:08:08,320
Öyleyse sana başka bir örnek göstereceğim.

111
00:08:08,460 --> 00:08:12,600
Paragraf yazı tipi boyutunun yazı tipi

112
00:08:16,800 --> 00:08:27,140
boyutunu artıralım ve bunları 40 piksel yapalım ve bunun hala iki kat kaldığını görebilirsiniz.

113
00:08:27,150 --> 00:08:32,410
Öyleyse E-M hakkında çok şey uyandıran bir soru, v'nin başlangıç ​​değeri nedir ve en

114
00:08:32,400 --> 00:08:33,500
üst seviye nedir.

115
00:08:33,580 --> 00:08:38,840
Çünkü bir ebeveynden miras kalmaya devam edemeyiz ve ebeveynin bir miktar hakikat kaynağı olması gerekir.

116
00:08:38,860 --> 00:08:45,120
Aslında bir yazı tipi boyutuna sahip ve aslında biraz sinir bozucu olan tarayıcıya bağlı olarak değişen

117
00:08:45,660 --> 00:08:48,580
çok üst düzey öğesinde olduğu gibi olmalı.

118
00:08:49,050 --> 00:08:55,480
Ancak SDN'ye göre genellikle 16 piksel dolayında olduğu için bu garanti değil, ancak genellikle 16 piksel

119
00:08:55,480 --> 00:08:56,060
civarındadır.

120
00:08:56,160 --> 00:09:01,680
Çoğu insanın yapacağı şey, başlangıçta vücut üzerinde bir yazı tipi boyutu ayarlamaktır.

121
00:09:01,950 --> 00:09:07,960
Yani bu vücut font boyutu gibi bir şey.

122
00:09:08,220 --> 00:09:16,860
Ve ona 10 piksel gibi başlamak için gerçekten küçük bir şeyler yapalım ve sonra vücudundan beş

123
00:09:16,890 --> 00:09:23,560
kat daha geniş olması için bir veya daha fazla değiştirmemize izin verelim.

124
00:09:23,620 --> 00:09:30,330
Bu, beş porno E-M gibi görünecek ve sonra paragraftan cesedin iki misli daha

125
00:09:30,340 --> 00:09:31,090
büyük olacak.

126
00:09:31,120 --> 00:09:33,000
Yani 2. 0 E-M.

127
00:09:33,180 --> 00:09:37,230
Ve son olarak, genişliğimizin bir paragrafın iki katı kadar olmasını isteriz.

128
00:09:37,360 --> 00:09:40,810
Yani bu da 2. 0 çünkü içeride iç içe geçmiş olduğunu unutmayın.

129
00:09:41,080 --> 00:09:46,710
Öyleyse bir paragrafın ötesinde bazı metinler yapalım ve bunun oldukça küçük olduğunu göreceksiniz.

130
00:09:47,010 --> 00:09:50,080
Sonra da bunu beş kat daha büyük yaptık.

131
00:09:50,160 --> 00:09:51,820
Bunu iki kat daha büyük yaptık.

132
00:09:52,000 --> 00:09:54,300
Ve bu paragrafın iki katı kadar büyük