Emoji Hizalama – Css
Merhaba,
- Emojiler ile başınız belada mı?
- Emojileriniz farklı gözükmesin hepsi aynı sabit olsun mu istiyorsunuz?
- Emojileri dikey ve yatay hizalarken dikey sütunda problem mi oluyor?
- Emojilerin biri büyük biri küçük mü görünüyor?
- Emojiler yazı içinde farklı boyutta mı görünüyor.
Doğru konuya geldiniz!
Bakın yukarıdaki emojlerin biri büyük biri küçük ve dikey hizalamada alt alta gelmiyor.
Bu problemi width ve height ile aşamıyorsunuz padding ve margin ile aşamıyorsunuz.
Bu konuda işin piri Whatsapp ı inceledim ve emojiler hep aynı boyutta ve aynı sütunda görülebiliyor.
Whatsapp kodlarını taradığımda gördüm ki emojileri düzgün göstermek adına google ın açık kaynak fontunu kullanmış…
Biz de aynı yoldan gideceğiz ve emojiler yatay, dikey hizalı bu şekilde düzgün görülecek:
Dikkat ettiyseniz hizalamanın haricinde görüntü olarak da daha güzel duruyor.
Nasıl yapacağınızı anlatayım:
Google Noto Color Emoji ile Düzgün Hizalama
Bu fontu sayfanıza eklemek için şunları yapacaksınız:
1. <Head> arasına bu kodu ekle:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
2. Css kodlarının en başına bu kodu ekle:
<style> @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap'); </style>
3. Fontu nerede kullanacağını seçmek adına bu kodu ekle (body nin altına ekleyebilirsin.)
font-family: 'Noto Color Emoji', sans-serif;
Daha anlaşılır olsun diye tüm kodu html olarak paylaşayım…
<html lang="tr">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
body {font-family: 'Noto Color Emoji', sans-serif;}
</style>
</head>
<body>
<p>Bu emoji artık noto color emoji olarak gözükecektir: 😀</p>
</body>
</html>
Konuyla ilgili diğer sitemdeki örnek emojilere buradan ulaşabilirsiniz:
https://whatsappturk.com/sanatsal-emoji-hazirlama/
Kaynak:https://fonts.google.com/noto/specimen/Noto+Color+Emoji
