نمایش ایموجی‌های آیفون (iOS) در وبلاگ

توی دستگاه های مختلف شکل ایموجی ها مختلف هست ولی در بین همه آنها همه ایموجی آیفون (همونی که توی بیشتر پیام رسان های ایرانی هم هست) خیلی محبوب بوده.
حالا توی این آموزش میخواهیم با چند خط CSS این ایموجی رو به سایت یا وبلاگ خود اضافه کنیم.

قدم اول: معرفی فونت به قالب

این تیکه کد را به تگ <style>اضافه میکنیم.

@font-face {
    font-family: 'iOS-Emoji';
    src: url('https://www.vohuapp.ir/upload/fonts/iOS۱۶_۱۴.ttf') format('truetype');
    unicode-range: U+۱F۳۰۰-۱F۵FF, U+۱F۹۰۰-۱F۹FF, U+۱F۶۰۰-۱F۶۴F, U+۱F۶۸۰-۱F۶FF, U+۲۶۰۰-۲۶FF, U+۲۷۰۰-۲۷BF;
    font-display: swap;
}

قدم دوم: اعمال فونت روی متن‌های سایت

در کدهای CSS قالب خود به دنبال تگ body بگردید و نام فونت 'iOS-Emoji' را در بخش font-family، دقیقاً بعد از فونت اصلی سایت اضافه کنید.

به عنوان مثال این یک کد تغییر یافته است:

}
body{
    font-family: sahel, 'iOS-Emoji';
    background:#fff;
    color:#۰۰۰;
    line-height:۱.۹;
    transition:.۳s;
    overflow-x: hidden;
}

💡 یک نکته بسیار مهم:

شاید بپرسید چرا فونت ایموجی را در جایگاه دوم نوشتیم؟ دلیلش این است که مرورگر ابتدا حروف فارسی و انگلیسی سایت را با فونت زیبای «sahel» می‌خواند. اما وقتی در متن به یک “ایموجی” می‌رسد که در فونت وزیر وجود ندارد، به صورت خودکار سراغ فونت دوم یعنی 'iOS-Emoji' می‌رود و ایموجی‌ها را با ظاهر آیفون نمایش می‌دهد!