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

Bunlar da ho┼čunuza gidebilir...

Bir cevap yaz─▒n

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir

css.php