\u0130nternetin ilk g\u00fcnlerinden bu yana web tasar\u0131m\u0131 ve geli\u015ftirme, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve i\u00e7erik sunumunu iyile\u015ftirmek i\u00e7in s\u00fcrekli bir evrim ge\u00e7iriyor. Bu evrimin \u00f6nemli bir par\u00e7as\u0131 da tipografi olmu\u015ftur. Geleneksel olarak, web’de font kullan\u0131m\u0131 belirli s\u0131n\u0131rlamalarla geliyordu. Bir font ailesinin her farkl\u0131 a\u011f\u0131rl\u0131\u011f\u0131 (light, regular, bold), geni\u015fli\u011fi (condensed, normal, expanded) veya stili (italic) i\u00e7in ayr\u0131 bir font dosyas\u0131 y\u00fcklemek gerekiyordu. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve tipografik a\u00e7\u0131dan zengin web sitelerinde performans sorunlar\u0131na yol a\u00e7abiliyordu. Ancak, web teknolojilerindeki ilerlemelerle birlikte, tipografi d\u00fcnyas\u0131nda \u00e7\u0131\u011f\u0131r a\u00e7an bir yenilik ortaya \u00e7\u0131kt\u0131: De\u011fi\u015fken Fontlar (Variable Fonts).<\/p>\n
Geleneksel web fontlar\u0131, her bir varyasyon i\u00e7in ayr\u0131 bir fiziksel dosya gerektirir. \u00d6rne\u011fin, bir web sitesinde “Open Sans” fontunun hem normal a\u011f\u0131rl\u0131\u011f\u0131n\u0131, hem kal\u0131n (bold) a\u011f\u0131rl\u0131\u011f\u0131n\u0131, hem de italik stilini kullanmak istedi\u011finizde, taray\u0131c\u0131n\u0131n \u00fc\u00e7 ayr\u0131 font dosyas\u0131n\u0131 indirmesi gerekir. Bu durum, HTTP isteklerinin say\u0131s\u0131n\u0131 art\u0131r\u0131r ve toplam dosya boyutunu \u015fi\u015firerek sayfa y\u00fckleme s\u00fcrelerini uzat\u0131r. Mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Ayr\u0131ca, tasar\u0131mc\u0131lara sunulan esneklik de s\u0131n\u0131rl\u0131d\u0131r; yaln\u0131zca font tasar\u0131mc\u0131s\u0131n\u0131n \u00f6nceden tan\u0131mlad\u0131\u011f\u0131 a\u011f\u0131rl\u0131k ve geni\u015flik varyasyonlar\u0131n\u0131 kullanabilirler. Bu, mikro-tipografi \u00fczerinde detayl\u0131 kontrol sa\u011flamay\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
De\u011fi\u015fken fontlar, OpenType standard\u0131n\u0131n bir uzant\u0131s\u0131 olarak 2016 y\u0131l\u0131nda tan\u0131t\u0131ld\u0131. Bu teknoloji, bir font ailesinin t\u00fcm varyasyonlar\u0131n\u0131 (a\u011f\u0131rl\u0131k, geni\u015flik, e\u011fim, optik boyut vb.) tek bir font dosyas\u0131 i\u00e7inde bar\u0131nd\u0131rma yetene\u011fi sunar. Bu, web geli\u015ftiricileri ve tasar\u0131mc\u0131lar\u0131 i\u00e7in performans, esneklik ve yarat\u0131c\u0131l\u0131k a\u00e7\u0131s\u0131ndan devrim niteli\u011finde bir ad\u0131md\u0131r. Tek bir dosya ile, \u00f6nceden tan\u0131mlanm\u0131\u015f sabit varyasyonlara ba\u011fl\u0131 kalmadan, tipografik \u00f6zelliklerin geni\u015f bir yelpazesinde kesintisiz ge\u00e7i\u015fler ve ince ayarlar yapmak m\u00fcmk\u00fcn hale gelmi\u015ftir.<\/p>\n
De\u011fi\u015fken fontlar\u0131n sundu\u011fu temel faydalar \u015funlard\u0131r: De\u011fi\u015fken fontlar, OpenType font format\u0131n\u0131n bir uzant\u0131s\u0131d\u0131r ve tipografik \u00f6zelliklerin s\u00fcrekli bir spektrumda ayarlanmas\u0131na izin verir. Geleneksel fontlar\u0131n aksine, her bir varyasyon i\u00e7in ayr\u0131 bir dosya yerine, tek bir font dosyas\u0131 i\u00e7inde \u00e7ok say\u0131da varyasyonu bar\u0131nd\u0131r\u0131r. Bu teknoloji, font tasar\u0131mc\u0131lar\u0131n\u0131n font karakterlerinin ana hatlar\u0131n\u0131 belirli “ana noktalar” (master points) aras\u0131nda enterpolasyon (ara de\u011fer hesaplama) yaparak dinamik olarak de\u011fi\u015ftirmesine olanak tan\u0131r.<\/p>\n Bir de\u011fi\u015fken font dosyas\u0131, yaln\u0131zca bir font ailesinin “normal” veya “kal\u0131n” gibi belirli varyasyonlar\u0131n\u0131 de\u011fil, bu varyasyonlar aras\u0131ndaki t\u00fcm ara de\u011ferleri de i\u00e7erir. Bu, \u00f6rne\u011fin, bir fontun a\u011f\u0131rl\u0131\u011f\u0131n\u0131 1’den 1000’e kadar herhangi bir tam say\u0131 de\u011feri olarak ayarlayabilece\u011finiz anlam\u0131na gelir (geleneksel olarak sadece 100, 200, 300… gibi belirli ad\u0131mlar mevcuttu). Ayn\u0131 durum geni\u015flik, e\u011fim ve di\u011fer \u00f6zellikler i\u00e7in de ge\u00e7erlidir. Bu “sonsuz” varyasyon yetene\u011fi, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine benzersiz bir tipografik kontrol d\u00fczeyi sunar.<\/p>\n De\u011fi\u015fken fontlar\u0131n temelinde “eksenler” (axes) kavram\u0131 yatar. Eksenler, bir fontun hangi \u00f6zelliklerinin de\u011fi\u015ftirilebilece\u011fini tan\u0131mlayan parametrelerdir. Her eksen, belirli bir \u00f6zellik i\u00e7in bir de\u011fer aral\u0131\u011f\u0131na sahiptir.<\/p>\n OpenType standard\u0131 taraf\u0131ndan tan\u0131mlanm\u0131\u015f be\u015f ana, kay\u0131tl\u0131 eksen bulunur. Bunlar, font tasar\u0131mc\u0131lar\u0131 taraf\u0131ndan yayg\u0131n olarak kullan\u0131lan ve taray\u0131c\u0131lar taraf\u0131ndan \u00f6zel CSS \u00f6zellikleri ile do\u011frudan kontrol edilebilen eksenlerdir: Kay\u0131tl\u0131 eksenlerin yan\u0131 s\u0131ra, font tasar\u0131mc\u0131lar\u0131 kendi fontlar\u0131 i\u00e7in \u00f6zel eksenler de tan\u0131mlayabilirler. Bu eksenler, fontun benzersiz tasar\u0131m \u00f6zelliklerini kontrol etmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir fontun “serif” (t\u0131rnak) uzunlu\u011funu, “x-height” (k\u00fc\u00e7\u00fck harflerin y\u00fcksekli\u011fi) de\u011ferini, “ascender” (yukar\u0131 uzanan harf k\u0131s\u0131mlar\u0131) veya “descender” (a\u015fa\u011f\u0131 uzanan harf k\u0131s\u0131mlar\u0131) uzunlu\u011funu kontrol eden eksenler olabilir. \u00d6zel eksenler genellikle d\u00f6rt karakterli bir etiketle tan\u0131mlan\u0131r (\u00f6rn: De\u011fi\u015fken fontlar, OpenType format\u0131n\u0131n “variations” tablosunu kullanarak \u00e7al\u0131\u015f\u0131r. Bu tablo, fontun ana hatlar\u0131n\u0131n farkl\u0131 eksen de\u011ferlerine g\u00f6re nas\u0131l enterpolasyon yap\u0131laca\u011f\u0131n\u0131 tan\u0131mlayan verileri i\u00e7erir. Taray\u0131c\u0131, bu verileri kullanarak fontun istenen varyasyonunu dinamik olarak olu\u015fturur. Bu mekanizma, tek bir font dosyas\u0131yla \u00e7ok \u00e7e\u015fitli tipografik g\u00f6r\u00fcn\u00fcmler elde etmeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n De\u011fi\u015fken fontlar, web tipografisinde bir dizi \u00f6nemli avantaj sunar. Bu avantajlar hem teknik performans hem de tasar\u0131m esnekli\u011fi a\u00e7\u0131s\u0131ndan de\u011ferlendirilebilir.<\/p>\n Geleneksel olarak, bir web sitesi farkl\u0131 font a\u011f\u0131rl\u0131klar\u0131 veya stilleri kulland\u0131\u011f\u0131nda, her biri i\u00e7in ayr\u0131 bir HTTP iste\u011fi yap\u0131lmas\u0131 gerekir. \u00d6rne\u011fin, bir font ailesinin Light, Regular, Bold ve Italic versiyonlar\u0131n\u0131 kullanmak d\u00f6rt ayr\u0131 font dosyas\u0131 indirilmesi anlam\u0131na gelir. De\u011fi\u015fken fontlar ise t\u00fcm bu varyasyonlar\u0131 tek bir dosyada bar\u0131nd\u0131rd\u0131\u011f\u0131 i\u00e7in sadece bir HTTP iste\u011fi yeterlidir. Bu, sunucuya yap\u0131lan istek say\u0131s\u0131n\u0131 azaltarak sayfa y\u00fckleme s\u00fcrelerini do\u011frudan iyile\u015ftirir.<\/p>\n Bir de\u011fi\u015fken font dosyas\u0131, genellikle e\u015fde\u011fer say\u0131da geleneksel font dosyas\u0131n\u0131n toplam boyutundan daha k\u00fc\u00e7\u00fckt\u00fcr. \u00c7\u00fcnk\u00fc geleneksel fontlarda her varyasyon i\u00e7in tekrar eden glif verileri bulunurken, de\u011fi\u015fken fontlar sadece ana glifleri ve varyasyon verilerini depolar. Bu optimizasyon, \u00f6zellikle \u00e7ok say\u0131da tipografik varyasyona ihtiya\u00e7 duyan web siteleri i\u00e7in bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 azalt\u0131r ve daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri sa\u011flar. \u00d6rne\u011fin, bir fontun 5 farkl\u0131 a\u011f\u0131rl\u0131\u011f\u0131n\u0131 ayr\u0131 ayr\u0131 y\u00fcklemek yerine, tek bir de\u011fi\u015fken font dosyas\u0131 genellikle %30-50 daha az dosya boyutu kaplayabilir.<\/p>\n De\u011fi\u015fken fontlar, tasar\u0131mc\u0131lara fontun her bir \u00f6zelli\u011fini (a\u011f\u0131rl\u0131k, geni\u015flik, e\u011fim, optik boyut vb.) kesintisiz bir spektrumda ayarlama imkan\u0131 sunar. Bu, metinlerin belirli bir d\u00fczen i\u00e7inde m\u00fckemmel bir \u015fekilde s\u0131\u011fd\u0131r\u0131lmas\u0131, okunabilirli\u011fin art\u0131r\u0131lmas\u0131 ve g\u00f6rsel hiyerar\u015finin g\u00fc\u00e7lendirilmesi i\u00e7in “mikro-tipografi” d\u00fczeyinde kontrol sa\u011flar. Art\u0131k sadece “normal” veya “kal\u0131n” gibi sabit ad\u0131mlar yerine, \u00f6rne\u011fin “kal\u0131nl\u0131\u011f\u0131n 650. derecesi” gibi hassas ayarlamalar yap\u0131labilir.<\/p>\n Farkl\u0131 ekran boyutlar\u0131 ve cihazlar i\u00e7in metinlerin en uygun \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini sa\u011flamak, duyarl\u0131 tasar\u0131m\u0131n temelidir. De\u011fi\u015fken fontlar, bu alanda devrim niteli\u011finde yeni olanaklar sunar. CSS Media Query’leri veya JavaScript ile fontun a\u011f\u0131rl\u0131\u011f\u0131n\u0131, geni\u015fli\u011fini veya optik boyutunu dinamik olarak ayarlayarak, metinlerin her t\u00fcrl\u00fc ekran boyutunda okunabilir ve estetik kalmas\u0131n\u0131 sa\u011flayabilirsiniz. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda metin geni\u015fli\u011fini daraltarak daha fazla kelimenin s\u0131\u011fmas\u0131n\u0131 sa\u011flayabilir veya b\u00fcy\u00fck ekranlarda daha geni\u015f harf aral\u0131klar\u0131 kullanarak okunabilirli\u011fi art\u0131rabilirsiniz.<\/p>\n De\u011fi\u015fken fontlar\u0131n en heyecan verici y\u00f6nlerinden biri, tipografik \u00f6zelliklerin animasyon ve ge\u00e7i\u015flerle dinamik olarak de\u011fi\u015ftirilebilmesidir. De\u011fi\u015fken fontlar, eri\u015filebilirlik konusunda da \u00f6nemli iyile\u015ftirmeler sa\u011flayabilir. Kullan\u0131c\u0131lara, metinlerin a\u011f\u0131rl\u0131\u011f\u0131n\u0131 veya geni\u015fli\u011fini kendi g\u00f6rme yeteneklerine veya okuma tercihlerine g\u00f6re ayarlama se\u00e7ene\u011fi sunulabilir. \u00d6rne\u011fin, disleksisi olan kullan\u0131c\u0131lar belirli bir font geni\u015fli\u011fi veya a\u011f\u0131rl\u0131\u011f\u0131 ile daha rahat okuyabilirken, g\u00f6rme bozuklu\u011fu olanlar daha kal\u0131n metinleri tercih edebilir. Bu, web sitelerinin daha kapsay\u0131c\u0131 hale gelmesine yard\u0131mc\u0131 olur.<\/p>\n Yukar\u0131da belirtilen t\u00fcm avantajlar, nihayetinde daha iyi bir kullan\u0131c\u0131 deneyimine katk\u0131da bulunur. Daha h\u0131zl\u0131 y\u00fcklenen sayfalar, her cihazda optimize edilmi\u015f okunabilirlik, dinamik ve etkile\u015fimli tipografi, kullan\u0131c\u0131lar\u0131n web sitenizle etkile\u015fimini daha keyifli ve verimli hale getirir.<\/p>\n De\u011fi\u015fken fontlar\u0131 web projelerinize entegre etmek, geleneksel fontlara benzer bir s\u00fcre\u00e7 izler ancak baz\u0131 ek CSS \u00f6zellikleri ve dikkat edilmesi gereken noktalar bulunur.<\/p>\n De\u011fi\u015fken fontlar\u0131 kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle bir de\u011fi\u015fken font dosyas\u0131na ihtiyac\u0131n\u0131z var. Bu dosyalar genellikle Google Fonts, geni\u015f bir de\u011fi\u015fken font k\u00fct\u00fcphanesine sahiptir ve kullan\u0131m\u0131 olduk\u00e7a kolayd\u0131r. \u0130stedi\u011finiz fontu se\u00e7tikten sonra, Google’\u0131n size sa\u011flad\u0131\u011f\u0131 CSS kodunu projenize dahil edebilirsiniz. Google Fonts, taray\u0131c\u0131 deste\u011fini ve performans\u0131 otomatik olarak optimize eder.<\/p>\n Yukar\u0131daki \u00f6rnekte Adobe Fonts (Typekit olarak da bilinir), Adobe Creative Cloud aboneli\u011fi olan kullan\u0131c\u0131lara eri\u015fim sa\u011flar. Burada da bir\u00e7ok de\u011fi\u015fken font bulunur ve projelerinize entegrasyonu kolayd\u0131r.<\/p>\n Performans ve kontrol a\u00e7\u0131s\u0131ndan en iyi y\u00f6ntem genellikle fontlar\u0131 kendi sunucunuzda bar\u0131nd\u0131rmakt\u0131r. Bu durumda, font dosyas\u0131n\u0131 indirip projenizin ilgili klas\u00f6r\u00fcne yerle\u015ftirmeli ve De\u011fi\u015fken fontlar\u0131 CSS ile tan\u0131mlamak i\u00e7in * De\u011fi\u015fken fontlar\u0131 kulland\u0131ktan sonra, metinlere \u00e7e\u015fitli CSS \u00f6zellikleri uygulayarak fontun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirsiniz.<\/p>\n Bu \u00f6zellik, de\u011fi\u015fken fontun a\u011f\u0131rl\u0131k eksenini ( Bu \u00f6zellik, de\u011fi\u015fken fontun geni\u015flik eksenini ( Bu \u00f6zellik, fontun italik veya e\u011fik ( Bu \u00f6zellik, fontun optik boyutland\u0131rma eksenini ( Bu, de\u011fi\u015fken fontlar\u0131n en g\u00fc\u00e7l\u00fc ve esnek kontrol mekanizmas\u0131d\u0131r. Hem kay\u0131tl\u0131 hem de \u00f6zel eksenleri do\u011frudan ve ayr\u0131nt\u0131l\u0131 bir \u015fekilde ayarlaman\u0131za olanak tan\u0131r. S\u00f6z dizimi, d\u00f6rt karakterli eksen etiketi ve ard\u0131ndan bir de\u011ferden olu\u015fur. Birden fazla eksen virg\u00fclle ayr\u0131labilir.<\/p>\n S\u00f6z Dizimi ve Kullan\u0131m\u0131:<\/strong> Kay\u0131tl\u0131 Eksenler ile Kullan\u0131m:<\/strong> \u00d6zel Eksenler ile Kullan\u0131m:<\/strong> \u00c7oklu Eksenlerin Birle\u015ftirilmesi:<\/strong> \u00d6nemli Not:<\/strong> Her ne kadar modern taray\u0131c\u0131lar de\u011fi\u015fken fontlar\u0131 desteklese de, eski taray\u0131c\u0131lar veya belirli durumlar i\u00e7in bir geri d\u00f6n\u00fc\u015f (fallback) stratejisi belirlemek \u00f6nemlidir. Bu yakla\u015f\u0131m, taray\u0131c\u0131n\u0131n De\u011fi\u015fken fontlar, sadece performans iyile\u015ftirmesi de\u011fil, ayn\u0131 zamanda web tasar\u0131m\u0131nda yarat\u0131c\u0131l\u0131k ve dinamizm i\u00e7in de yeni kap\u0131lar a\u00e7ar.<\/p>\n De\u011fi\u015fken fontlar, duyarl\u0131 web tasar\u0131m\u0131nda metinlerin farkl\u0131 ekran boyutlar\u0131na ve cihazlara dinamik olarak uyum sa\u011flamas\u0131na olanak tan\u0131r.<\/p>\n Farkl\u0131 ekran geni\u015flikleri i\u00e7in fontun a\u011f\u0131rl\u0131\u011f\u0131n\u0131 veya geni\u015fli\u011fini ayarlayabilirsiniz.<\/p>\n CSS Bu t\u00fcr dinamik ayarlamalar, metinlerin her boyutta okunabilirli\u011fini ve esteti\u011fini korumas\u0131na yard\u0131mc\u0131 olur.<\/p>\n De\u011fi\u015fken fontlar\u0131n belki de en etkileyici y\u00f6nlerinden biri, font \u00f6zelliklerinin animasyon ve ge\u00e7i\u015flerle de\u011fi\u015ftirilebilmesidir.<\/p>\n Daha karma\u015f\u0131k ve s\u00fcrekli animasyonlar i\u00e7in Bu, ba\u015fl\u0131klar, logolar veya \u00f6zel metin efektleri i\u00e7in benzersiz g\u00f6rsel deneyimler yaratabilir.<\/p>\n JavaScript kullanarak, kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011feleri (slider, d\u00fc\u011fmeler vb.) arac\u0131l\u0131\u011f\u0131yla font \u00f6zelliklerini dinamik olarak de\u011fi\u015ftirebilirsiniz. Bu, kullan\u0131c\u0131lara metinlerin g\u00f6r\u00fcn\u00fcm\u00fc \u00fczerinde ki\u015fiselle\u015ftirilmi\u015f kontrol sa\u011flar.<\/p>\n Bu, eri\u015filebilirlik ara\u00e7lar\u0131 veya ki\u015fiselle\u015ftirme se\u00e7enekleri sunan web uygulamalar\u0131 i\u00e7in son derece faydal\u0131d\u0131r.<\/p>\n De\u011fi\u015fken fontlar, modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu taraf\u0131ndan iyi bir \u015fekilde desteklenmektedir (Chrome, Firefox, Safari, Edge). “Can I Use” web sitesinden g\u00fcncel taray\u0131c\u0131 deste\u011fi durumunu kontrol edebilirsiniz.<\/p>\n Progressive Enhancement:<\/strong> De\u011fi\u015fken fontlar\u0131 kullan\u0131rken “progressive enhancement” (a\u015famal\u0131 iyile\u015ftirme) prensibini benimsemek \u00f6nemlidir. Bu, temel i\u00e7eri\u011fin her zaman okunabilir olmas\u0131n\u0131 sa\u011flamak ve de\u011fi\u015fken font \u00f6zelliklerini bir “iyile\u015ftirme” olarak sunmakt\u0131r. Fontu desteklemeyen taray\u0131c\u0131lar i\u00e7in geleneksel font yedeklerini sa\u011flamak, bu yakla\u015f\u0131m\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r. Gerekirse, eski taray\u0131c\u0131lar i\u00e7in de\u011fi\u015fken font \u00f6zelliklerini taklit eden polyfill’ler de kullan\u0131labilir, ancak genellikle sadece temel font yedekleri yeterlidir.<\/p>\n De\u011fi\u015fken fontlar bir\u00e7ok avantaj sunsa da, en iyi performans\u0131 ve kullan\u0131c\u0131 deneyimini sa\u011flamak i\u00e7in baz\u0131 en iyi uygulamalara dikkat etmek gerekir.<\/p>\n De\u011fi\u015fken font dosyalar\u0131, geleneksel font dosyalar\u0131na g\u00f6re daha k\u00fc\u00e7\u00fck olsa da, yine de optimize edilmelidir. Tek bir de\u011fi\u015fken font dosyas\u0131, birden \u00e7ok geleneksel font dosyas\u0131ndan daha k\u00fc\u00e7\u00fck olabilir, ancak yine de b\u00fcy\u00fck bir font dosyas\u0131, sayfa y\u00fckleme s\u00fcresini etkileyebilir. De\u011fi\u015fken fontlar eri\u015filebilirli\u011fi art\u0131rabilirken, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda sorunlara da yol a\u00e7abilir: De\u011fi\u015fken fontlar\u0131n sundu\u011fu esneklik, tasar\u0131mc\u0131lar i\u00e7in b\u00fcy\u00fck bir g\u00fc\u00e7t\u00fcr, ancak bu g\u00fcc\u00fc ak\u0131ll\u0131ca kullanmak \u00f6nemlidir. De\u011fi\u015fken fontlar, web tipografisinde sadece bir trend de\u011fil, ayn\u0131 zamanda gelece\u011fin standard\u0131d\u0131r. Sundu\u011fu performans avantajlar\u0131, tasar\u0131m esnekli\u011fi ve yarat\u0131c\u0131 potansiyel, web’de metin sunumunu k\u00f6kten de\u011fi\u015ftirmektedir.<\/p>\n De\u011fi\u015fken font teknolojisi hala geli\u015fmekte olan bir aland\u0131r. Gelecekte daha fazla font tasar\u0131mc\u0131s\u0131n\u0131n de\u011fi\u015fken fontlar geli\u015ftirmesi, taray\u0131c\u0131 deste\u011finin daha da iyile\u015fmesi ve yeni CSS \u00f6zelliklerinin eklenmesi beklenmektedir. \u00d6zellikle font animasyonlar\u0131, duyarl\u0131 tipografi ve kullan\u0131c\u0131 ki\u015fiselle\u015ftirmesi alanlar\u0131nda daha sofistike \u00e7\u00f6z\u00fcmler g\u00f6rebiliriz. Web Components veya JavaScript k\u00fct\u00fcphaneleri arac\u0131l\u0131\u011f\u0131yla font \u00f6zelliklerinin daha kolay manip\u00fcle edilmesi de olas\u0131 geli\u015fmeler aras\u0131ndad\u0131r. Ayr\u0131ca, font dosyalar\u0131n\u0131n daha da optimize edilmesi ve sunum mekanizmalar\u0131n\u0131n iyile\u015ftirilmesiyle performans avantajlar\u0131 daha da artacakt\u0131r.<\/p>\n De\u011fi\u015fken fontlar, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine daha \u00f6nce hi\u00e7 olmad\u0131\u011f\u0131 kadar tipografik kontrol sunarak, metinleri statik bir i\u00e7erikten dinamik, etkile\u015fimli ve uyarlanabilir bir \u00f6\u011feye d\u00f6n\u00fc\u015ft\u00fcrme f\u0131rsat\u0131 vermektedir. Bu teknoloji, web sitelerinin daha h\u0131zl\u0131 y\u00fcklenmesine, daha estetik g\u00f6r\u00fcnmesine ve daha geni\u015f bir kullan\u0131c\u0131 kitlesi i\u00e7in eri\u015filebilir olmas\u0131na yard\u0131mc\u0131 olmaktad\u0131r.<\/p>\n Web’de de\u011fi\u015fken fontlar\u0131 kullanmak, ba\u015flang\u0131\u00e7ta biraz \u00f6\u011frenme e\u011frisi gerektirse de, uzun vadede sundu\u011fu faydalar bu \u00e7abaya de\u011ferdir. Performans iyile\u015ftirmelerinden, s\u0131n\u0131rs\u0131z tasar\u0131m olanaklar\u0131na kadar, de\u011fi\u015fken fontlar web’de tipografiye yeni bir boyut kazand\u0131r\u0131yor ve dijital deneyimlerimizi zenginle\u015ftirmeye devam edecektir. Bu g\u00fc\u00e7l\u00fc arac\u0131 benimseyerek, web projelerinizi bir sonraki seviyeye ta\u015f\u0131yabilir ve kullan\u0131c\u0131lara unutulmaz g\u00f6rsel deneyimler sunabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web’de CSS ile De\u011fi\u015fken Fontlar: Tipografiye Yeni Bir Boyut\nGiri\u015f\n\u0130nternetin ilk g\u00fcnlerinden bu yana web tasar\u0131m\u0131 ve geli\u015ftirme, kullan\u0131c\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-36640","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n1. Performans \u0130yile\u015ftirmesi:<\/strong> Tek bir font dosyas\u0131, birden \u00e7ok HTTP iste\u011fini ortadan kald\u0131r\u0131r ve toplam dosya boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir. Bu, sayfa y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r ve daha iyi bir kullan\u0131c\u0131 deneyimi sunar.
\n2. Tasar\u0131m Esnekli\u011fi:<\/strong> Fontun a\u011f\u0131rl\u0131\u011f\u0131, geni\u015fli\u011fi, e\u011fimi ve di\u011fer \u00f6zellikleri \u00fczerinde piksel hassasiyetinde kontrol sa\u011flar. Bu, duyarl\u0131 tasar\u0131mlarda metinlerin farkl\u0131 ekran boyutlar\u0131na ve ba\u011flamlara dinamik olarak uyum sa\u011flamas\u0131na olanak tan\u0131r.
\n3. Yarat\u0131c\u0131l\u0131k:<\/strong> Animasyonlar, ge\u00e7i\u015fler ve kullan\u0131c\u0131 etkile\u015fimleriyle tipografiyi dinamik hale getirme potansiyeli sunar. Metinlerin farkl\u0131 durumlara g\u00f6re g\u00f6rsel olarak de\u011fi\u015fmesini sa\u011flayarak daha zengin ve etkile\u015fimli deneyimler yarat\u0131labilir.
\n4. Eri\u015filebilirlik:<\/strong> Kullan\u0131c\u0131lar\u0131n kendi tercihlerine g\u00f6re metin a\u011f\u0131rl\u0131\u011f\u0131n\u0131 veya geni\u015fli\u011fini ayarlamalar\u0131na olanak tan\u0131yarak eri\u015filebilirli\u011fi art\u0131rabilir.<\/p>\nDe\u011fi\u015fken Fontlar Nedir?<\/h3>\n
Tek Bir Dosya, Sonsuz Varyasyon<\/h3>\n
Eksenler (Axes) Kavram\u0131<\/h3>\n
Kay\u0131tl\u0131 Eksenler (Registered Axes)<\/h4>\n
\n* A\u011f\u0131rl\u0131k (Weight – wght<\/code>):<\/strong> Font karakterlerinin kal\u0131nl\u0131\u011f\u0131n\u0131 kontrol eder. Genellikle 1 ile 1000 aras\u0131nda bir de\u011fer al\u0131r (\u00f6rne\u011fin, 100 ince, 400 normal, 700 kal\u0131n). CSS’de font-weight<\/code> \u00f6zelli\u011fi ile do\u011frudan e\u015fle\u015fir.
\n* Geni\u015flik (Width – wdth<\/code>):<\/strong> Font karakterlerinin yatay geni\u015fli\u011fini kontrol eder. Genellikle 0 ile 100 aras\u0131nda bir y\u00fczde de\u011feri al\u0131r (\u00f6rne\u011fin, 75 daralt\u0131lm\u0131\u015f, 100 normal, 125 geni\u015fletilmi\u015f). CSS’de font-stretch<\/code> \u00f6zelli\u011fi ile do\u011frudan e\u015fle\u015fir.
\n* E\u011fim (Slant – slnt<\/code>):<\/strong> Font karakterlerinin sa\u011fa veya sola do\u011fru e\u011fimini kontrol eder. Genellikle -90 ile 90 aras\u0131nda bir derece de\u011feri al\u0131r. Pozitif de\u011ferler sa\u011fa, negatif de\u011ferler sola e\u011fim anlam\u0131na gelir.
\n* \u0130talik (Italic – ital<\/code>):<\/strong> Bir fontun italik versiyonuna ge\u00e7i\u015fi kontrol eder. Genellikle 0 (normal) veya 1 (italik) gibi ikili bir de\u011fer al\u0131r. Baz\u0131 de\u011fi\u015fken fontlar, italik ge\u00e7i\u015fini yumu\u015fak bir animasyonla yapabilir. CSS’de font-style: italic<\/code> veya font-style: oblique<\/code> ile dolayl\u0131 olarak kontrol edilebilir.
\n* Optik Boyut (Optical Size – opsz<\/code>):<\/strong> Fontun belirli bir boyutta en iyi okunabilirli\u011fi sa\u011flamak i\u00e7in optimize edilmesini kontrol eder. K\u00fc\u00e7\u00fck boyutlarda daha geni\u015f harf aral\u0131klar\u0131 ve daha kal\u0131n vuru\u015flar, b\u00fcy\u00fck boyutlarda ise daha ince vuru\u015flar ve daha dar aral\u0131klar gibi ayarlamalar yapabilir. Genellikle piksel cinsinden bir de\u011fer al\u0131r (\u00f6rne\u011fin, 8pt, 72pt). CSS’de font-optical-sizing<\/code> \u00f6zelli\u011fi ile kontrol edilebilir.<\/p>\n\u00d6zel Eksenler (Custom Axes)<\/h4>\n
GRAD<\/code> for Grade, XTRA<\/code> for X-height adjustment). Bu eksenler, CSS’de font-variation-settings<\/code> \u00f6zelli\u011fi kullan\u0131larak kontrol edilir.<\/p>\nOpenType Varyasyonlar\u0131<\/h3>\n
De\u011fi\u015fken Fontlar\u0131n Avantajlar\u0131<\/h3>\n
Performans ve Dosya Boyutu<\/h3>\n
Daha Az HTTP \u0130ste\u011fi<\/h4>\n
Daha K\u00fc\u00e7\u00fck Toplam Dosya Boyutu<\/h4>\n
Tasar\u0131m Esnekli\u011fi ve Kontrol<\/h3>\n
Mikro-Tipografi<\/h4>\n
Duyarl\u0131 Tasar\u0131mda Yeni Olanaklar<\/h4>\n
Animasyon ve Ge\u00e7i\u015fler<\/h4>\n
font-variation-settings<\/code> \u00f6zelli\u011fine CSS ge\u00e7i\u015fleri (transition<\/code>) veya anahtar kare animasyonlar\u0131 (@keyframes<\/code>) uygulayarak metinlerin a\u011f\u0131rl\u0131\u011f\u0131n\u0131, geni\u015fli\u011fini veya e\u011fimini yumu\u015fak bir \u015fekilde de\u011fi\u015ftirebilirsiniz. Bu, etkile\u015fimli ba\u015fl\u0131klar, d\u00fc\u011fme durumlar\u0131 veya kullan\u0131c\u0131 aray\u00fcz\u00fc \u00f6\u011feleri i\u00e7in benzersiz ve dikkat \u00e7ekici g\u00f6rsel efektler yaratma potansiyeli sunar.<\/p>\nEri\u015filebilirlik<\/h3>\n
Kullan\u0131c\u0131 Deneyimi<\/h3>\n
Web’de De\u011fi\u015fken Fontlar\u0131 Kullanmaya Ba\u015flama<\/h3>\n
Font Dosyas\u0131 Se\u00e7imi ve Kaynaklar\u0131<\/h3>\n
.woff2<\/code> (Web Open Font Format 2) veya .ttf<\/code> (TrueType Font) format\u0131nda bulunur. .woff2<\/code> genellikle web i\u00e7in tercih edilen formatt\u0131r \u00e7\u00fcnk\u00fc daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar.<\/p>\nGoogle Fonts<\/h4>\n
<\/code><\/pre>\nRoboto Flex<\/code> fontu, opsz<\/code> (optik boyut) ve wght<\/code> (a\u011f\u0131rl\u0131k) eksenleri i\u00e7in belirli aral\u0131klarla y\u00fcklenir.<\/p>\nAdobe Fonts<\/h4>\n
Kendi Bar\u0131nd\u0131rma (Self-Hosting)<\/h4>\n
@font-face<\/code> kural\u0131n\u0131 kullanarak CSS’inizde tan\u0131mlamal\u0131s\u0131n\u0131z.<\/p>\nCSS ile Entegrasyon:
@font-face<\/code> Kural\u0131<\/h3>\n@font-face<\/code> kural\u0131n\u0131 kullan\u0131r\u0131z. Ancak geleneksel fontlardan farkl\u0131 olarak, font-weight<\/code>, font-stretch<\/code> ve font-style<\/code> \u00f6zelliklerine tek bir de\u011fer yerine bir aral\u0131k (range) de\u011feri veririz. Bu, taray\u0131c\u0131ya bu fontun belirtilen \u00f6zellikler i\u00e7in de\u011fi\u015fken oldu\u011funu bildirir.<\/p>\n@font-face {\n font-family: 'MyVariableFont';\n src: url('MyVariableFont.woff2') format('woff2');\n font-weight: 100 900; \/ Minimum a\u011f\u0131rl\u0131k 100, maksimum 900 <\/em>\/\n font-stretch: 75% 125%; \/ Minimum geni\u015flik 75%, maksimum 125% <\/em>\/\n font-style: oblique 0deg 10deg; \/ 0 dereceden 10 dereceye kadar e\u011fim <\/em>\/\n \/ Di\u011fer eksenler i\u00e7in varsay\u0131lan de\u011ferler veya aral\u0131klar <\/em>\/\n font-optical-sizing: auto; \/ Taray\u0131c\u0131n\u0131n optik boyutland\u0131rmay\u0131 otomatik y\u00f6netmesini sa\u011flar <\/em>\/\n \/ font-variation-settings: 'GRAD' 0 200; \u00d6zel bir eksen i\u00e7in aral\u0131k belirtilebilir <\/em>\/\n font-display: swap; \/ Fontun nas\u0131l y\u00fcklenece\u011fini ve g\u00f6r\u00fcnt\u00fclenece\u011fini belirtir <\/em>\/\n}<\/code><\/pre>\nfont-family<\/code>: Font ailesine verdi\u011finiz isim.
\n* src<\/code>: Font dosyas\u0131n\u0131n yolu ve format\u0131. Web i\u00e7in genellikle woff2<\/code> format\u0131 tercih edilir.
\n* font-weight<\/code>: Fontun destekledi\u011fi minimum ve maksimum a\u011f\u0131rl\u0131k de\u011ferlerini belirtir (\u00f6rne\u011fin, 100 900<\/code>).
\n* font-stretch<\/code>: Fontun destekledi\u011fi minimum ve maksimum geni\u015flik de\u011ferlerini belirtir (\u00f6rne\u011fin, 75% 125%<\/code>).
\n* font-style<\/code>: Fontun destekledi\u011fi e\u011fim de\u011ferlerini belirtir. normal<\/code>, italic<\/code> veya oblique<\/code> ile birlikte bir a\u00e7\u0131 aral\u0131\u011f\u0131 (oblique 0deg 10deg<\/code>) kullan\u0131labilir.
\n* font-optical-sizing<\/code>: Taray\u0131c\u0131n\u0131n metin boyutuna g\u00f6re optik ayarlamalar yap\u0131p yapmayaca\u011f\u0131n\u0131 kontrol eder. auto<\/code> veya none<\/code> de\u011ferlerini alabilir.
\n* font-variation-settings<\/code>: Bu, de\u011fi\u015fken fontlar\u0131n g\u00fcc\u00fcn\u00fc tam olarak kullanmam\u0131z\u0131 sa\u011flayan en \u00f6nemli \u00f6zelliktir. Kay\u0131tl\u0131 veya \u00f6zel eksenler i\u00e7in de\u011ferleri manuel olarak ayarlaman\u0131za olanak tan\u0131r.
\n* font-display<\/code>: Fontun y\u00fcklenmesi s\u0131ras\u0131nda metnin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol eder (swap<\/code>, fallback<\/code>, optional<\/code>, block<\/code>). swap<\/code> genellikle iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\nTemel CSS \u00d6zellikleri ve De\u011ferleri<\/h3>\n
font-weight<\/code><\/h4>\nwght<\/code>) kontrol eder. @font-face<\/code> kural\u0131nda belirtilen aral\u0131k dahilinde herhangi bir say\u0131sal de\u011feri alabilir.<\/p>\np {\n font-family: 'MyVariableFont';\n font-weight: 450; \/ Normalden biraz daha kal\u0131n <\/em>\/\n}\n\nh1 {\n font-family: 'MyVariableFont';\n font-weight: 800; \/ \u00c7ok kal\u0131n <\/em>\/\n}<\/code><\/pre>\nfont-stretch<\/code><\/h4>\nwdth<\/code>) kontrol eder. Y\u00fczde de\u011ferleri veya anahtar kelimeler (ultra-condensed<\/code>, extra-condensed<\/code>, condensed<\/code>, semi-condensed<\/code>, normal<\/code>, semi-expanded<\/code>, expanded<\/code>, extra-expanded<\/code>, ultra-expanded<\/code>) ile kullan\u0131labilir.<\/p>\n.condensed-text {\n font-family: 'MyVariableFont';\n font-stretch: 80%; \/ Daralt\u0131lm\u0131\u015f geni\u015flik <\/em>\/\n}\n\n.expanded-text {\n font-family: 'MyVariableFont';\n font-stretch: 110%; \/ Geni\u015fletilmi\u015f geni\u015flik <\/em>\/\n}<\/code><\/pre>\nfont-style<\/code><\/h4>\nslnt<\/code> veya ital<\/code>) eksenlerini kontrol eder. normal<\/code>, italic<\/code> veya oblique<\/code> anahtar kelimeleri ile birlikte, oblique<\/code> i\u00e7in bir a\u00e7\u0131 de\u011feri (\u00f6rne\u011fin, oblique 15deg<\/code>) kullan\u0131labilir.<\/p>\n.italic-text {\n font-family: 'MyVariableFont';\n font-style: italic;\n}\n\n.slanted-text {\n font-family: 'MyVariableFont';\n font-style: oblique 12deg; \/ 12 derece e\u011fim <\/em>\/\n}<\/code><\/pre>\nfont-optical-sizing<\/code><\/h4>\nopsz<\/code>) kontrol eder. auto<\/code> veya none<\/code> de\u011ferlerini alabilir. auto<\/code> de\u011feri, taray\u0131c\u0131n\u0131n font boyutuna g\u00f6re otomatik olarak optik ayarlamalar yapmas\u0131n\u0131 sa\u011flar.<\/p>\nbody {\n font-optical-sizing: auto; \/ T\u00fcm metinlerde otomatik optik boyutland\u0131rma <\/em>\/\n}<\/code><\/pre>\nfont-variation-settings<\/code><\/h4>\n
\nfont-variation-settings: '
\nfont-weight<\/code>, font-stretch<\/code>, font-style<\/code> gibi \u00f6zellikler, taray\u0131c\u0131 taraf\u0131ndan otomatik olarak font-variation-settings<\/code>‘e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Ancak, bu \u00f6zelli\u011fi do\u011frudan kullanarak daha fazla kontrol sa\u011flayabilirsiniz.<\/p>\n.custom-text {\n font-family: 'MyVariableFont';\n font-variation-settings: 'wght' 650, 'wdth' 90;\n \/ A\u011f\u0131rl\u0131\u011f\u0131 650, geni\u015fli\u011fi %90 olarak ayarlar <\/em>\/\n}<\/code><\/pre>\n
\n\u00d6zel eksenler i\u00e7in yaln\u0131zca font-variation-settings<\/code> kullan\u0131labilir.<\/p>\n\/ Varsayal\u0131m ki fontumuzda 'GRAD' (Grade) ve 'XTRA' (X-height) ad\u0131nda \u00f6zel eksenler var <\/em>\/\n.special-text {\n font-family: 'MyVariableFont';\n font-variation-settings: 'wght' 550, 'GRAD' 120, 'XTRA' 70;\n \/ A\u011f\u0131rl\u0131k 550, Grade 120, X-height 70 olarak ayarlar <\/em>\/\n}<\/code><\/pre>\n
\nBirden fazla ekseni virg\u00fclle ay\u0131rarak ayn\u0131 anda kontrol edebilirsiniz.<\/p>\n.combined-settings {\n font-family: 'MyVariableFont';\n font-variation-settings: 'wght' 700, 'wdth' 110, 'slnt' 8;\n \/ Kal\u0131n, geni\u015fletilmi\u015f ve hafif e\u011fimli <\/em>\/\n}<\/code><\/pre>\nfont-weight<\/code>, font-stretch<\/code>, font-style<\/code> gibi \u00fcst d\u00fczey CSS \u00f6zellikleri ile font-variation-settings<\/code> ayn\u0131 eksenleri hedefledi\u011finde, font-variation-settings<\/code> daha d\u00fc\u015f\u00fck \u00f6nceli\u011fe sahiptir ve \u00fcst d\u00fczey \u00f6zellikler taraf\u0131ndan ge\u00e7ersiz k\u0131l\u0131nabilir. En iyi uygulama, font-variation-settings<\/code>‘i yaln\u0131zca \u00f6zel eksenler veya \u00fcst d\u00fczey \u00f6zellikler taraf\u0131ndan desteklenmeyen kay\u0131tl\u0131 eksenler (\u00f6rne\u011fin slnt<\/code>) i\u00e7in kullanmakt\u0131r. Ancak, t\u00fcm kontrol\u00fc tek bir yerde toplamak isterseniz, font-variation-settings<\/code>‘i t\u00fcm eksenler i\u00e7in kullanabilirsiniz. Bu durumda, di\u011fer font-*<\/code> \u00f6zelliklerini kullanmaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z.<\/p>\nFallback Stratejileri<\/h3>\n
@font-face<\/code> kural\u0131nda, src<\/code> \u00f6zelli\u011finde birden fazla url()<\/code> belirterek taray\u0131c\u0131n\u0131n destekledi\u011fi ilk format\u0131 kullanmas\u0131n\u0131 sa\u011flayabilirsiniz. Ayr\u0131ca, de\u011fi\u015fken fontu desteklemeyen taray\u0131c\u0131lar i\u00e7in geleneksel fontlar\u0131 (.woff<\/code>, .ttf<\/code>) veya sistem fontlar\u0131n\u0131 yedek olarak tan\u0131mlayabilirsiniz.<\/p>\n@font-face {\n font-family: 'MyVariableFont';\n src: url('MyVariableFont.woff2') format('woff2 supports variations'), \/ De\u011fi\u015fken font deste\u011fi olanlar i\u00e7in <\/em>\/\n url('MyVariableFont-Regular.woff') format('woff'); \/ Desteklemeyenler i\u00e7in geleneksel font <\/em>\/\n font-weight: 100 900;\n font-stretch: 75% 125%;\n font-style: oblique 0deg 10deg;\n font-display: swap;\n}\n\n\/ Fallback i\u00e7in genel CSS <\/em>\/\nbody {\n font-family: 'MyVariableFont', Helvetica, Arial, sans-serif;\n}<\/code><\/pre>\nformat('woff2 supports variations')<\/code> ile de\u011fi\u015fken fontu destekleyip desteklemedi\u011fini kontrol etmesini sa\u011flar. E\u011fer desteklemiyorsa, bir sonraki src<\/code> tan\u0131m\u0131na (geleneksel woff<\/code> dosyas\u0131na) ge\u00e7er.<\/p>\nPratik Uygulamalar ve \u0130leri Seviye Kullan\u0131m<\/h3>\n
Duyarl\u0131 Tipografi<\/h3>\n
@media<\/code> Sorgular\u0131 ile Eksen De\u011ferlerini De\u011fi\u015ftirme<\/h4>\nh1 {\n font-family: 'MyVariableFont';\n font-weight: 700; \/ Varsay\u0131lan kal\u0131nl\u0131k <\/em>\/\n font-variation-settings: 'wdth' 100; \/ Varsay\u0131lan geni\u015flik <\/em>\/\n}\n\n@media (max-width: 768px) {\n h1 {\n font-weight: 600; \/ Daha k\u00fc\u00e7\u00fck ekranlarda biraz daha ince <\/em>\/\n font-variation-settings: 'wdth' 90; \/ Daha dar ekranlarda biraz daralt\u0131lm\u0131\u015f <\/em>\/\n }\n}\n\n@media (min-width: 1200px) {\n h1 {\n font-weight: 800; \/ Daha geni\u015f ekranlarda daha kal\u0131n <\/em>\/\n font-variation-settings: 'wdth' 110; \/ Daha geni\u015f ekranlarda biraz geni\u015fletilmi\u015f <\/em>\/\n }\n}<\/code><\/pre>\ncalc()<\/code> Fonksiyonu ile Dinamik De\u011ferler<\/h4>\ncalc()<\/code> fonksiyonunu kullanarak, viewport geni\u015fli\u011fine veya di\u011fer dinamik de\u011ferlere ba\u011fl\u0131 olarak font \u00f6zelliklerini hesaplayabilirsiniz. Bu, metinlerin ekran boyutuna g\u00f6re sorunsuz bir \u015fekilde \u00f6l\u00e7eklenmesini sa\u011flar.<\/p>\np {\n font-family: 'MyVariableFont';\n \/ Viewport geni\u015fli\u011fine g\u00f6re dinamik a\u011f\u0131rl\u0131k <\/em>\/\n font-variation-settings: 'wght' calc(400 + (100vw - 400px) \/ 10);\n \/ Bu \u00f6rnek, viewport 400px'ten b\u00fcy\u00fckse a\u011f\u0131rl\u0131\u011f\u0131 art\u0131r\u0131r <\/em>\/\n}<\/code><\/pre>\nAnimasyonlar ve Ge\u00e7i\u015fler<\/h3>\n
transition<\/code> \u00d6zelli\u011fi<\/h4>\nfont-variation-settings<\/code> \u00f6zelli\u011fine CSS transition<\/code> uygulayarak, font \u00f6zelliklerinin durum de\u011fi\u015fikliklerinde yumu\u015fak bir \u015fekilde ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n.animated-text {\n font-family: 'MyVariableFont';\n font-variation-settings: 'wght' 400, 'wdth' 100;\n transition: font-variation-settings 0.3s ease-in-out;\n}\n\n.animated-text:hover {\n font-variation-settings: 'wght' 700, 'wdth' 120;\n \/ Hover durumunda kal\u0131nla\u015f\u0131r ve geni\u015fler <\/em>\/\n}<\/code><\/pre>\n@keyframes<\/code> ile Dinamik Font Varyasyonlar\u0131<\/h4>\n@keyframes<\/code> kurallar\u0131n\u0131 kullanabilirsiniz.<\/p>\n@keyframes pulse-weight {\n 0% { font-variation-settings: 'wght' 400; }\n 50% { font-variation-settings: 'wght' 800; }\n 100% { font-variation-settings: 'wght' 400; }\n}\n\n.pulsing-text {\n font-family: 'MyVariableFont';\n animation: pulse-weight 2s infinite alternate;\n}<\/code><\/pre>\nKullan\u0131c\u0131 Etkile\u015fimi ile Font Ayarlar\u0131<\/h3>\n
\/\/ \u00d6rnek JavaScript kodu\nconst myText = document.querySelector('.customizable-text');\nconst weightSlider = document.getElementById('weight-slider');\n\nweightSlider.addEventListener('input', (event) => {\n const newWeight = event.target.value;\n myText.style.fontVariationSettings = 'wght' ${newWeight}<\/code>;\n \/\/ E\u011fer birden fazla eksen varsa:\n \/\/ myText.style.fontVariationSettings = 'wght' ${newWeight}, 'wdth' ${currentWidth}<\/code>;\n});<\/code><\/pre>\nTaray\u0131c\u0131 Deste\u011fi ve Polyfill’ler<\/h3>\n
Dikkat Edilmesi Gerekenler ve En \u0130yi Uygulamalar<\/h3>\n
Font Dosyas\u0131 Optimizasyonu<\/h3>\n
\n* Subsetleme (Subsetting):<\/strong> Yaln\u0131zca web sitenizde kullan\u0131lan karakterleri (\u00f6rne\u011fin, sadece Latin alfabesi veya belirli semboller) i\u00e7eren bir font alt k\u00fcmesi olu\u015fturmak, dosya boyutunu daha da azaltabilir. Google Fonts gibi servisler bu i\u015flemi otomatik yapar.
\n* Format Se\u00e7imi:<\/strong> Web i\u00e7in en verimli format genellikle .woff2<\/code>‘dir. @font-face<\/code> kural\u0131nda \u00f6nce .woff2<\/code>‘yi belirtin, ard\u0131ndan di\u011fer formatlar\u0131 (\u00f6rne\u011fin .woff<\/code>) yedek olarak ekleyin.<\/p>\nPerformans Etkisi<\/h3>\n
\n* Gereksiz Eksenlerden Ka\u00e7\u0131nma:<\/strong> Bir fontun t\u00fcm eksenlerini kullanm\u0131yorsan\u0131z, baz\u0131 font servisleri yaln\u0131zca ihtiyac\u0131n\u0131z olan eksenleri i\u00e7eren bir dosya olu\u015fturman\u0131za izin verir. Bu, dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcr.
\n* Lazy Loading:<\/strong> Sayfan\u0131n alt k\u0131s\u0131mlar\u0131ndaki veya etkile\u015fimli \u00f6\u011felerdeki fontlar\u0131 gecikmeli olarak y\u00fcklemeyi d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\nFont Y\u00fckleme Stratejileri (
font-display<\/code>)<\/h3>\n@font-face<\/code> kural\u0131ndaki font-display<\/code> \u00f6zelli\u011fi, font y\u00fcklenirken metnin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol etmek i\u00e7in kritik \u00f6neme sahiptir.
\n* swap<\/code>: Font y\u00fcklenene kadar bir yedek fontu kullan\u0131r, ard\u0131ndan y\u00fcklendi\u011finde fontu de\u011fi\u015ftirir. Bu, “Flash of Unstyled Text (FOUT)” etkisi yaratabilir ancak i\u00e7eri\u011fin h\u0131zl\u0131 bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar. Genellikle iyi bir varsay\u0131lan de\u011ferdir.
\n* block<\/code>: Font y\u00fcklenene kadar metni gizler, ard\u0131ndan y\u00fcklendi\u011finde g\u00f6sterir. Bu, “Flash of Invisible Text (FOIT)” etkisi yaratabilir ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7abilir.
\n* fallback<\/code>: swap<\/code>‘e benzer, ancak daha k\u0131sa bir block<\/code> s\u00fcresi ve daha k\u0131sa bir swap<\/code> s\u00fcresi vard\u0131r.
\n* optional<\/code>: Taray\u0131c\u0131n\u0131n fontu y\u00fckleyip y\u00fcklemeyece\u011fine veya ne zaman y\u00fckleyece\u011fine karar vermesine izin verir. Genellikle d\u00fc\u015f\u00fck \u00f6ncelikli fontlar i\u00e7in kullan\u0131l\u0131r.<\/p>\nEri\u015filebilirlik Konular\u0131<\/h3>\n
\n* A\u015f\u0131r\u0131 Animasyon:<\/strong> Metinlerin s\u00fcrekli de\u011fi\u015fen a\u011f\u0131rl\u0131\u011f\u0131 veya geni\u015fli\u011fi, baz\u0131 kullan\u0131c\u0131lar i\u00e7in dikkat da\u011f\u0131t\u0131c\u0131 veya okumay\u0131 zorla\u015ft\u0131r\u0131c\u0131 olabilir. Animasyonlar\u0131 \u00f6l\u00e7\u00fcl\u00fc kullan\u0131n ve kullan\u0131c\u0131lara durdurma veya azaltma se\u00e7ene\u011fi sunmay\u0131 d\u00fc\u015f\u00fcn\u00fcn.
\n* Kontrast:<\/strong> Font varyasyonlar\u0131n\u0131 de\u011fi\u015ftirirken metin ve arka plan aras\u0131ndaki kontrast oran\u0131n\u0131n yeterli kald\u0131\u011f\u0131ndan emin olun. \u00d6zellikle \u00e7ok ince veya \u00e7ok a\u00e7\u0131k renkli metinler okunabilirli\u011fi olumsuz etkileyebilir.
\n* Kullan\u0131c\u0131 Tercihleri:<\/strong> Kullan\u0131c\u0131lara font \u00f6zelliklerini kendi tercihlerine g\u00f6re ayarlama imkan\u0131 sunmak, web sitenizin eri\u015filebilirli\u011fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\nTasar\u0131m ve Kullan\u0131labilirlik<\/h3>\n
\n* Tutarl\u0131l\u0131k:<\/strong> Fontun farkl\u0131 varyasyonlar\u0131n\u0131 kullan\u0131rken tasar\u0131m sisteminiz i\u00e7inde tutarl\u0131l\u0131\u011f\u0131 koruyun. \u00c7ok fazla varyasyon kullanmak, g\u00f6rsel karma\u015faya yol a\u00e7abilir.
\n* Okunabilirlik:<\/strong> En \u00f6nemli \u00f6ncelik her zaman okunabilirlik olmal\u0131d\u0131r. Fontun a\u011f\u0131rl\u0131\u011f\u0131n\u0131 veya geni\u015fli\u011fini ayarlarken metnin kolay okunabilirli\u011fini tehlikeye atmay\u0131n.
\n* Test Etme:<\/strong> Farkl\u0131 taray\u0131c\u0131larda, cihazlarda ve ekran boyutlar\u0131nda de\u011fi\u015fken fontlar\u0131n\u0131z\u0131n nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc ve davrand\u0131\u011f\u0131n\u0131 kapsaml\u0131 bir \u015fekilde test edin.<\/p>\nGelecek ve Sonu\u00e7<\/h3>\n
De\u011fi\u015fken Fontlar\u0131n Gelece\u011fi<\/h3>\n
Tipografi D\u00fcnyas\u0131nda Devrim<\/h3>\n