Artık her projemizde @font-face kullanıyoruz. Kullanırken bazı sorunlar yaşıyoruz ve bu sorunlara çözümler üretiyoruz. Bu makalenin konusu da bu sorunlardan birini çözüyor.

Hemen meseleye girelim. Bir @font-face tanımı yapalım. Ben burada daha kısa olsun diye woff2 yapıyorum ama siz Woff2 ve font-face tanımını iki satıra indirmek yazımdaki ilk kodu kullanın.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
}

Sonra bunu kullanalım.

body {
  font-family: Lato;
}

HTML kodu

<ul>
  <li><strong>İnebahtı Deniz Savaşı ve Donanmamızın Yakılması</strong> (<em>1571</em>)</li>
  <li>Rusya'da Komünist İhtilali (<em>1917</em>)</li>
  <li>Amerikan ve İngiliz Kuvvetlerinin Afganistan'a Girmesi (2001)</li>
</ul>

Metin ve stil olarak koda bakarsak, normal metin, kalın hali ve eğik hali kullanılmış. Fakat bir sorun var. Yazı tipinin kalın ve eğik halleri pek bizim istediğimiz gibi değil. Çünkü biz yazı tipinin normal halini yükledik, kalın ve eğik kullanımı tarayıcı uydurmaya çalıştı. Tarayıcının yapacağıda bu kadar.

Bu sorunu görünce ilk olarak aklımıza “her bir yazı tipi hali için bir font-face tanımı yapalım ve onları tanımlayalım” düşüncesi gelir.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LatoBold';
  src: url('lato-bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LatoItalic';
  src: url('lato-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Sonra bu yazı tiplerini kullanırken, CSS’de

body { 
  font-family: Lato, Georgia, serif; 
}

h1 {
  font-family: LatoBold, Georgia, serif;
  font-weight:normal;
}
em {
  font-family: LatoItalic, Georgia, serif;
  font-weight:normal;
  font-style:normal;
}

Her bir tanım için font-family tanımı yapıyoruz. Peki bunun daha kolay çözümü var mı?

Çözüm: Çözüm için @font-face tanımındaki font-weight ve font-style özelliklerinden yaralanarak tek yazı tipine bu farklı stilleri bağlayabiliriz.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

yukarıdaki koda dikkat edersek, font-family tanımları aynı, font-weight ve font-style alanları farklıdır. CSS’de kullanırken;

body { 
  font-family: Lato, Georgia, serif; 
}

h1 {
  font-weight: bold;
}
em {
  font-style: italic;
}

Sonuç olarak güzel bir çözüm ve daha basit bir yazım sağlıyor bize.

Ben bu makaleyi yaklaşık 2 sene önce yazacaktım, ancak Himmet Samet Çaktı abi ben blog açacam bunu ben yazayım dedi. Bizde gençtir gönlü kırılmasın diye tamam dedik. 2 sene geçti, Samet hala blog açacak :)

Kalın sağlıcakla.

Kaynaklar

• http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles
• http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
• https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

Uzun süredir İnternet Explorer için düzeltme yazmamıştım. Ne güzel dünya. Gerçi bu bir düzeltme midir bilemedim.

Uzatmadan hemen sorunu ve çözümü yazayım.

Sorun: İnternet Explorer 10 ve üzeri sürümlerinde metin girdi alanlarında (input text) alanlarına kullanıcı bir şeyler yazınca otomatik olarak input’un sağında silmek için bir X butonu çıkarıyor. Tabi tasarımcı arkada bu alana bir ikon koyunca üst üste biniyor.

Çözüm: Google’da bir arama yap ve stackoverflow’da gelen sonuç senin çözümündür :)

input::-ms-clear {
  display: none;
}

Birde şifre girdi alanlarında (input - password) şifreyi göster ikonu çıkıyor onu engellemek içinde

input::-ms-reveal {
  display: none;
}

kodu yeterliymiş.

Kalın sağlıcakla.

Kaynak

• http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs

Yaklaşık 6 sene önce bu başlığa yakın bir başlık ile bir makale yazmışım. Yatay ve Dikeyde Ortalı Alanlar Oluşturmak yeni gelen özellikler ile bu kodu daha basit nasıl yapabilirim diye bakınırken flexbox özelliği aklıma geldi.

Peki flexbox ile bu işi nasıl yaparım.

HTML kodu aynı olsun;

<div class="orta-alan">
  <p>Fatih Hayrioğlu'nun not defteri</p>
</div>

Bazı ufak değişiklikler var. Eskiden id ve camelCase iken şimdi class ve kebap-case‘e geçtim.

CSS kodunun başında değişen bir şey yok.

html, body {
  height: 100%;
}

body{
  margin:0;
  padding:0;
  background-color:#D2D2D2;
  font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#333333;
}

Değişen kısım.

.orta-alan {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

align-items: center; dikeyde ortalamak için, justify-content: center; yatayda ortalamak için yeterli. Tabi bu elemanın flex olduğunu göstermek için display: flex; tanımını başta yapmalıyız.

Genişlik ve yükseklik burada tam sayfa kullandığımız için 100% verildi. Tabi siz istediğiniz genişlik ve yükseklik tanımını yaparak çalışabilirsiniz.

Kalın sağlıcakla.