{"id":32247,"date":"2025-10-19T12:41:54","date_gmt":"2025-10-19T09:41:54","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32247"},"modified":"2025-10-19T12:41:54","modified_gmt":"2025-10-19T09:41:54","slug":"css-font-shorthand-ozelligi-nedir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/","title":{"rendered":"CSS font Shorthand \u00d6zelli\u011fi Nedir?"},"content":{"rendered":"

<\/p>\n

Web tasar\u0131m\u0131nda metinlerin g\u00f6rsel sunumu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS, font \u00f6zelliklerini y\u00f6netmek i\u00e7in bir dizi tekil \u00f6zellik sunsa da, bu \u00f6zelliklerin bir\u00e7o\u011funu tek bir sat\u0131rda toplaman\u0131za olanak tan\u0131yan g\u00fc\u00e7l\u00fc bir k\u0131sayol \u00f6zelli\u011fi de mevcuttur: font<\/code> shorthand \u00f6zelli\u011fi. Bu rehberde, font<\/code> k\u0131sayol \u00f6zelli\u011finin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, s\u00f6z dizimini, bile\u015fenlerini ve pratik ipu\u00e7lar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

CSS font Shorthand \u00d6zelli\u011fi Nedir?<\/h2>\n

CSS font<\/code> k\u0131sayol \u00f6zelli\u011fi, bir \u00f6\u011fenin fontla ilgili bir\u00e7ok \u00f6zelli\u011fini tek bir CSS bildirimiyle tan\u0131mlaman\u0131za olanak tan\u0131yan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu \u00f6zellik, font stilini, varyant\u0131n\u0131, kal\u0131nl\u0131\u011f\u0131n\u0131, boyutunu, sat\u0131r y\u00fcksekli\u011fini ve font ailesini ayn\u0131 anda ayarlamak i\u00e7in kullan\u0131l\u0131r. Kodunuzu daha k\u0131sa, daha okunabilir ve daha az hataya a\u00e7\u0131k hale getirerek geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n

Tekil font \u00f6zellikleri (\u00f6rne\u011fin, font-style<\/code>, font-weight<\/code>, font-size<\/code>, line-height<\/code>, font-family<\/code>) ayr\u0131 ayr\u0131 tan\u0131mland\u0131\u011f\u0131nda birden fazla sat\u0131r kaplayabilir. font<\/code> k\u0131sayolu, bu karma\u015f\u0131kl\u0131\u011f\u0131 ortadan kald\u0131rarak geli\u015ftiricilere daha zarif bir \u00e7\u00f6z\u00fcm sunar. \u00d6rne\u011fin, bir fontun stilini, kal\u0131nl\u0131\u011f\u0131n\u0131, boyutunu ve ailesini tek bir sat\u0131rda tan\u0131mlayabilir ve b\u00f6ylece kod tekrar\u0131n\u0131 azaltabilirsiniz.<\/p>\n

font Shorthand S\u00f6z Dizimi ve Bile\u015fenleri<\/h2>\n

font<\/code> k\u0131sayol \u00f6zelli\u011finin s\u00f6z dizimi belirli bir s\u0131raya uymak zorundad\u0131r. Bu s\u0131ra, CSS ayr\u0131\u015ft\u0131r\u0131c\u0131s\u0131n\u0131n hangi de\u011ferin hangi \u00f6zelli\u011fe ait oldu\u011funu do\u011fru bir \u015fekilde anlamas\u0131 i\u00e7in hayati \u00f6neme sahiptir. Genel s\u00f6z dizimi \u015fu \u015fekildedir:<\/p>\n

font: [font-style] [font-variant] [font-weight] [font-stretch]  [\/line-height] ;\n<\/code><\/pre>\n
\u015eimdi bu bile\u015fenleri tek tek inceleyelim:<\/p>\n
font-style (\u0130ste\u011fe Ba\u011fl\u0131)<\/h3>\n
Metnin stilini belirler. Olas\u0131 de\u011ferler:<\/p>\n
    \n
  • normal<\/code>: Varsay\u0131lan stil.<\/li>\n
  • italic<\/code>: \u0130talik (e\u011fik) stil.<\/li>\n
  • oblique<\/code>: E\u011fik stil (taray\u0131c\u0131lar genellikle italic<\/code> ile ayn\u0131 \u015fekilde render eder).<\/li>\n<\/ul>\n
    Belirtilmezse varsay\u0131lan de\u011feri normal<\/code>‘dir.<\/p>\n
    font-variant (\u0130ste\u011fe Ba\u011fl\u0131)<\/h3>\n
    Metnin varyant\u0131n\u0131 belirler. En yayg\u0131n de\u011feri:<\/p>\n
      \n
    • normal<\/code>: Varsay\u0131lan varyant.<\/li>\n
    • small-caps<\/code>: K\u00fc\u00e7\u00fck harfleri, b\u00fcy\u00fck harflerin daha k\u00fc\u00e7\u00fck versiyonlar\u0131 olarak g\u00f6sterir.<\/li>\n<\/ul>\n
      Belirtilmezse varsay\u0131lan de\u011feri normal<\/code>‘dir.<\/p>\n
      font-weight (\u0130ste\u011fe Ba\u011fl\u0131)<\/h3>\n
      Metnin kal\u0131nl\u0131\u011f\u0131n\u0131 belirler. Olas\u0131 de\u011ferler:<\/p>\n
        \n
      • normal<\/code>: Normal kal\u0131nl\u0131k (genellikle 400’e e\u015fittir).<\/li>\n
      • bold<\/code>: Kal\u0131n (genellikle 700’e e\u015fittir).<\/li>\n
      • lighter<\/code>: \u00dcst \u00f6\u011fesinden daha hafif.<\/li>\n
      • bolder<\/code>: \u00dcst \u00f6\u011fesinden daha kal\u0131n.<\/li>\n
      • 100<\/code>‘den 900<\/code>‘e kadar say\u0131lar: Fontun destekledi\u011fi kal\u0131nl\u0131k d\u00fczeyleri (100 en hafif, 900 en kal\u0131nd\u0131r).<\/li>\n<\/ul>\n
        Belirtilmezse varsay\u0131lan de\u011feri normal<\/code>‘dir.<\/p>\n
        font-stretch (\u0130ste\u011fe Ba\u011fl\u0131)<\/h3>\n
        Fontun geni\u015fli\u011fini ayarlar. Bu \u00f6zellik genellikle de\u011fi\u015fken fontlar (variable fonts) ile kullan\u0131l\u0131r ve fontun karakterlerinin ne kadar dar veya geni\u015f olaca\u011f\u0131n\u0131 belirler. Olas\u0131 de\u011ferler:<\/p>\n
          \n
        • normal<\/code>: Varsay\u0131lan geni\u015flik.<\/li>\n
        • ultra-condensed<\/code>, extra-condensed<\/code>, condensed<\/code>, semi-condensed<\/code>, semi-expanded<\/code>, expanded<\/code>, extra-expanded<\/code>, ultra-expanded<\/code>.<\/li>\n<\/ul>\n
          Bu \u00f6zellik, font-family<\/code>‘nin desteklemesi durumunda etki g\u00f6sterir ve di\u011ferlerine g\u00f6re daha az yayg\u0131n kullan\u0131l\u0131r. Belirtilmezse varsay\u0131lan de\u011feri normal<\/code>‘dir.<\/p>\n
           (Zorunlu)<\/h3>\n
          Metnin boyutunu belirler. Bu de\u011fer zorunludur<\/strong> ve mutlak veya g\u00f6receli bir uzunluk birimiyle (\u00f6rn. 16px<\/code>, 1.2em<\/code>, 1rem<\/code>, 120%<\/code>) ifade edilmelidir.<\/p>\n
          \/line-height (\u0130ste\u011fe Ba\u011fl\u0131)<\/h3>\n
          Metin sat\u0131rlar\u0131 aras\u0131ndaki bo\u015flu\u011fu (sat\u0131r y\u00fcksekli\u011fini) belirler. Bu de\u011fer, font-size<\/code> de\u011ferinden sonra bir e\u011fik \u00e7izgi (\/<\/code>) ile ayr\u0131l\u0131r. \u00d6rne\u011fin, 16px\/1.5<\/code>. Sat\u0131r y\u00fcksekli\u011fi, genellikle birimsiz bir say\u0131 (1.5<\/code> gibi), y\u00fczde (150%<\/code>) veya bir uzunluk birimi (24px<\/code>) olarak belirtilir. Birimsiz say\u0131 kullan\u0131lmas\u0131 tavsiye edilir, \u00e7\u00fcnk\u00fc bu, font boyutuna g\u00f6re orant\u0131l\u0131 bir sat\u0131r y\u00fcksekli\u011fi sa\u011flar.<\/p>\n
           (Zorunlu)<\/h3>\n
          Kullan\u0131lacak font ailesini belirler. Bu de\u011fer de zorunludur<\/strong>. Birden fazla font ailesi, virg\u00fclle ayr\u0131larak bir yedekleme listesi olarak belirtilebilir. Taray\u0131c\u0131, listedeki ilk mevcut fontu kullan\u0131r. E\u011fer font ad\u0131 bo\u015fluk i\u00e7eriyorsa veya \u00f6zel karakterler bar\u0131nd\u0131r\u0131yorsa t\u0131rnak i\u00e7ine al\u0131nmal\u0131d\u0131r (\u00f6rn. \"Times New Roman\"<\/code>). Jenerik font aileleri (serif<\/code>, sans-serif<\/code>, monospace<\/code>, cursive<\/code>, fantasy<\/code>) listenin sonunda yer almal\u0131d\u0131r.<\/p>\n
          \u00d6nemli Not:<\/strong> font-size<\/code> ve font-family<\/code> de\u011ferleri, font<\/code> k\u0131sayol \u00f6zelli\u011finde mutlaka<\/strong> belirtilmelidir. Di\u011fer t\u00fcm \u00f6zellikler iste\u011fe ba\u011fl\u0131d\u0131r ve belirtilmedikleri takdirde varsay\u0131lan de\u011ferlerine geri d\u00f6nerler.<\/p>\n
          Pratik Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h2>\n
          font<\/code> k\u0131sayolunu kullan\u0131rken dikkat etmeniz gereken baz\u0131 \u00f6nemli noktalar ve pratik \u00f6rnekler a\u015fa\u011f\u0131dad\u0131r.<\/p>\n
          Basit \u00d6rnekler<\/h3>\n
          Sadece zorunlu \u00f6zellikleri kullanarak en basit font<\/code> tan\u0131m\u0131:<\/p>\n
          .basit-metin {\n    font: 16px Arial, sans-serif;\n}\n<\/code><\/pre>\n
          Sat\u0131r y\u00fcksekli\u011fini ekleyerek:<\/p>\n
          .satir-yuksekligi {\n    font: 18px\/1.5 Verdana, sans-serif; \/ 18px font boyutu, font boyutunun 1.5 kat\u0131 sat\u0131r y\u00fcksekli\u011fi <\/em>\/\n}\n<\/code><\/pre>\n
          Stil, kal\u0131nl\u0131k ve di\u011fer \u00f6zelliklerle birlikte:<\/p>\n
          .tam-ornek {\n    font: italic small-caps bold 1.2em\/1.6 \"Segoe UI\", sans-serif;\n}\n<\/code><\/pre>\n
          Kod \u00d6rnekleri<\/h3>\n
          A\u015fa\u011f\u0131daki HTML yap\u0131s\u0131n\u0131 kullanarak \u00e7e\u015fitli font<\/code> k\u0131sayol \u00f6rneklerini g\u00f6sterelim:<\/p>\n
          \n\n\n    \n    \n    CSS Font Shorthand \u00d6rne\u011fi<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 20px;\n        }\n        .intro-text {\n            font: italic 400 18px\/1.6 Georgia, serif; \/<em> \u0130talik, normal kal\u0131nl\u0131k, 18px, 1.6 sat\u0131r y\u00fcksekli\u011fi <\/em>\/\n            color: #333;\n        }\n        .main-heading {\n            font: bold 2.5rem\/1.2 \"Helvetica Neue\", sans-serif; \/<em> Kal\u0131n, 2.5rem, 1.2 sat\u0131r y\u00fcksekli\u011fi <\/em>\/\n            color: #1a1a1a;\n            margin-top: 30px;\n        }\n        .small-caption {\n            font: small-caps 14px \"Times New Roman\", serif; \/<em> Small-caps, 14px <\/em>\/\n            color: #666;\n            margin-top: 10px;\n        }\n        .condensed-text {\n            \/<em> font-stretch \u00f6zelli\u011fi fontun desteklemesi durumunda etkili olur <\/em>\/\n            font: normal condensed 16px\/1.4 \"Open Sans Condensed\", sans-serif;\n            color: #444;\n            margin-top: 15px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <p class=\"intro-text\">Bu metin, tan\u0131t\u0131m ama\u00e7l\u0131 \u00f6zel bir font stiliyle bi\u00e7imlendirilmi\u015ftir. Font k\u0131sayolunun esnekli\u011fini g\u00f6sterir.<\/p>\n    <h2 class=\"main-heading\">Ana Ba\u015fl\u0131k \u00d6rne\u011fi<\/h2>\n    <p class=\"small-caption\">K\u00fc\u00e7\u00fck harfli b\u00fcy\u00fck fontlarla yaz\u0131lm\u0131\u015f bir altyaz\u0131.<\/p>\n    <p class=\"condensed-text\">Bu metin, e\u011fer destekleniyorsa, yo\u011funla\u015ft\u0131r\u0131lm\u0131\u015f bir font geni\u015fli\u011fi ile g\u00f6r\u00fcnt\u00fclenir.<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<h3>\u00d6nemli \u0130pu\u00e7lar\u0131<\/h3>\n<ol>\n<li><strong>S\u0131ra \u00d6nemlidir:<\/strong> <code>font<\/code> k\u0131sayolunda \u00f6zelliklerin s\u0131ras\u0131 sabittir. Bu s\u0131raya uymak zorunludur. Yanl\u0131\u015f s\u0131ra, CSS’in beklendi\u011fi gibi \u00e7al\u0131\u015fmamas\u0131na neden olabilir.<\/li>\n<li><strong>Varsay\u0131lan De\u011ferler:<\/strong> <code>font<\/code> k\u0131sayolunda belirtilmeyen t\u00fcm \u00f6zellikler (<code>font-style<\/code>, <code>font-variant<\/code>, <code>font-weight<\/code>, <code>font-stretch<\/code>, <code>line-height<\/code>) varsay\u0131lan de\u011ferlerine geri d\u00f6ner. Bu, \u00f6nceki CSS kurallar\u0131nda ayarlanm\u0131\u015f olsalar bile bu de\u011ferlerin \u00fczerine yaz\u0131laca\u011f\u0131 anlam\u0131na gelir. Bu nedenle, <code>font<\/code> k\u0131sayolunu kullan\u0131rken t\u00fcm font \u00f6zelliklerini yeniden d\u00fc\u015f\u00fcnmeniz \u00f6nemlidir.<\/li>\n<li><strong><code>font-size<\/code> ve <code>font-family<\/code> Zorunludur:<\/strong> Bu iki \u00f6zellik olmadan <code>font<\/code> k\u0131sayolu ge\u00e7ersizdir ve taray\u0131c\u0131 taraf\u0131ndan yok say\u0131l\u0131r.<\/li>\n<li><strong><code>line-height<\/code> Kullan\u0131m\u0131:<\/strong> <code>line-height<\/code> de\u011feri, <code>font-size<\/code> de\u011ferinden hemen sonra bir e\u011fik \u00e7izgi (<code>\/<\/code>) ile ayr\u0131lmal\u0131d\u0131r. \u00d6rne\u011fin, <code>16px\/1.5<\/code>. Birimsiz de\u011fer (<code>1.5<\/code> gibi) kullanmak, metin boyutuna g\u00f6re orant\u0131l\u0131 bir sat\u0131r y\u00fcksekli\u011fi sa\u011flad\u0131\u011f\u0131 i\u00e7in genellikle en iyi pratiktir.<\/li>\n<li><strong><code>font-variant<\/code> ve <code>font-stretch<\/code>:<\/strong> Bu \u00f6zellikler daha az yayg\u0131n kullan\u0131lsa da, belirli tasar\u0131m efektleri i\u00e7in olduk\u00e7a faydal\u0131d\u0131r. \u00d6zellikle <code>small-caps<\/code>, ba\u015fl\u0131klar veya vurgulu metinler i\u00e7in \u015f\u0131k bir dokunu\u015f katabilir. <code>font-stretch<\/code> ise variable fontlar ile daha fazla kontrol sa\u011flar.<\/li>\n<li><strong>Performans ve Okunabilirlik:<\/strong> <code>font<\/code> k\u0131sayolu, kodunuzu daha az sat\u0131rda yazman\u0131z\u0131 sa\u011flayarak okunabilirli\u011fi art\u0131r\u0131r ve dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcr. Bu, \u00f6zellikle b\u00fcy\u00fck stil sayfalar\u0131nda performansa k\u00fc\u00e7\u00fck de olsa katk\u0131da bulunabilir.<\/li>\n<\/ol>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<p>CSS <code>font<\/code> k\u0131sayol \u00f6zelli\u011fi, web geli\u015ftiricileri i\u00e7in font \u00f6zelliklerini y\u00f6netmede vazge\u00e7ilmez bir ara\u00e7t\u0131r. Tek bir sat\u0131rda birden fazla font \u00f6zelli\u011fini tan\u0131mlama yetene\u011fi, kodunuzu daha temiz, daha verimli ve daha okunabilir hale getirir. Do\u011fru s\u00f6z dizimini ve bile\u015fenlerin s\u0131ras\u0131n\u0131 anlamak, bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi etkin bir \u015fekilde kullanman\u0131n anahtar\u0131d\u0131r. Unutmay\u0131n, <code>font-size<\/code> ve <code>font-family<\/code> zorunludur ve belirtilmeyen di\u011fer \u00f6zellikler varsay\u0131lan de\u011ferlerine d\u00f6ner.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<h3>Soru 1: <code>font<\/code> shorthand kullanmak her zaman iyi midir?<\/h3>\n<p><strong>Cevap:<\/strong> \u00c7o\u011fu durumda evet, \u00e7\u00fcnk\u00fc kodunuzu daha k\u0131sa ve okunabilir hale getirir. Ancak, yaln\u0131zca tek bir font \u00f6zelli\u011fini (\u00f6rne\u011fin sadece <code>font-weight<\/code>) de\u011fi\u015ftirmek istiyorsan\u0131z, o tekil \u00f6zelli\u011fi kullanmak daha uygun olabilir. <code>font<\/code> k\u0131sayolu, belirtilmeyen t\u00fcm font \u00f6zelliklerini varsay\u0131lan de\u011ferlerine s\u0131f\u0131rlad\u0131\u011f\u0131ndan, bu durumlarda istenmeyen yan etkilere neden olabilir.<\/p>\n<h3>Soru 2: <code>font<\/code> shorthand ile <code>font-size<\/code> ve <code>line-height<\/code> de\u011ferlerini nas\u0131l ay\u0131r\u0131r\u0131m?<\/h3>\n<p><strong>Cevap:<\/strong> <code>font-size<\/code> de\u011ferinden hemen sonra bir e\u011fik \u00e7izgi (<code>\/<\/code>) kullanarak ay\u0131rabilirsiniz. \u00d6rne\u011fin: <code>16px\/1.5<\/code>. Burada <code>16px<\/code> font boyutunu, <code>1.5<\/code> ise sat\u0131r y\u00fcksekli\u011fini temsil eder.<\/p>\n<h3>Soru 3: <code>font<\/code> shorthand kullan\u0131rken hangi \u00f6zellikler varsay\u0131lan de\u011ferlerine d\u00f6ner?<\/h3>\n<p><strong>Cevap:<\/strong> <code>font<\/code> k\u0131sayolunda a\u00e7\u0131k\u00e7a belirtilmeyen t\u00fcm fontla ilgili \u00f6zellikler (<code>font-style<\/code>, <code>font-variant<\/code>, <code>font-weight<\/code>, <code>font-stretch<\/code> ve <code>line-height<\/code>), \u00f6nceki tan\u0131mlamalardan ba\u011f\u0131ms\u0131z olarak varsay\u0131lan de\u011ferlerine geri d\u00f6nerler. Bu nedenle, <code>font<\/code> k\u0131sayolunu kullan\u0131rken t\u00fcm bu \u00f6zellikleri yeniden d\u00fc\u015f\u00fcnerek belirtmeniz \u00f6nemlidir.<\/p>\n<h3>Soru 4: Web fontlar\u0131 ile <code>font<\/code> shorthand nas\u0131l kullan\u0131l\u0131r?<\/h3>\n<p><strong>Cevap:<\/strong> Web fontlar\u0131n\u0131 (\u00f6rne\u011fin Google Fonts’tan veya kendi bar\u0131nd\u0131rd\u0131\u011f\u0131n\u0131z fontlar\u0131) kullanmak i\u00e7in \u00f6ncelikle <code>@font-face<\/code> kural\u0131 ile fontu tan\u0131mlaman\u0131z gerekir. Daha sonra, <code>font<\/code> k\u0131sayolunun <code>font-family<\/code> k\u0131sm\u0131nda bu tan\u0131mlad\u0131\u011f\u0131n\u0131z font ailesinin ad\u0131n\u0131 belirtebilirsiniz. \u00d6rne\u011fin:<\/p>\n<pre><code class=\"language-css\">@font-face {\n    font-family: 'MyCustomFont';\n    src: url('mycustomfont.woff2') format('woff2');\n}\n\n.custom-text {\n    font: normal 400 20px\/1.5 'MyCustomFont', sans-serif;\n}\n<\/code><\/pre>\n<h3>Soru 5: Neden <code>font-size<\/code> ve <code>font-family<\/code> zorunlu?<\/h3>\n<p><strong>Cevap:<\/strong> Bir metnin g\u00f6rsel olarak anlaml\u0131 bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in temel olarak iki bilgiye ihtiya\u00e7 vard\u0131r: metnin boyutu (<code>font-size<\/code>) ve hangi fontun kullan\u0131laca\u011f\u0131 (<code>font-family<\/code>). Bu iki \u00f6zellik, bir fontu tan\u0131mlamak i\u00e7in minimum gereksinimleri sa\u011flar. Di\u011fer \u00f6zellikler (stil, kal\u0131nl\u0131k vb.) bu temel tan\u0131m\u0131n \u00fczerine eklenen detaylard\u0131r.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web tasar\u0131m\u0131nda metinlerin g\u00f6rsel sunumu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS, font \u00f6zelliklerini y\u00f6netmek i\u00e7in bir","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-32247","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS font Shorthand \u00d6zelli\u011fi Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS font Shorthand \u00d6zelli\u011fi Nedir?\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda metinlerin g\u00f6rsel sunumu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS, font \u00f6zelliklerini y\u00f6netmek i\u00e7in bir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-19T09:41:54+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS font Shorthand \u00d6zelli\u011fi Nedir?\",\"datePublished\":\"2025-10-19T09:41:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\"},\"wordCount\":1350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\",\"name\":\"CSS font Shorthand \u00d6zelli\u011fi Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-19T09:41:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS font Shorthand \u00d6zelli\u011fi Nedir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS font Shorthand \u00d6zelli\u011fi Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS font Shorthand \u00d6zelli\u011fi Nedir?","og_description":"Web tasar\u0131m\u0131nda metinlerin g\u00f6rsel sunumu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. CSS, font \u00f6zelliklerini y\u00f6netmek i\u00e7in bir","og_url":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-19T09:41:54+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS font Shorthand \u00d6zelli\u011fi Nedir?","datePublished":"2025-10-19T09:41:54+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/"},"wordCount":1350,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/","url":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/","name":"CSS font Shorthand \u00d6zelli\u011fi Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-19T09:41:54+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-font-shorthand-ozelligi-nedir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS font Shorthand \u00d6zelli\u011fi Nedir?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32247"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32247\/revisions"}],"predecessor-version":[{"id":32248,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32247\/revisions\/32248"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}