آیا تا به حال دقت کردهاید که ایموجیها در گوشیها و مرورگرهای مختلف، شکلهای متفاوتی دارند؟ ایموجیهای آیفون (سیستم عامل iOS) همیشه یکی از محبوبترین و زیباترین طراحیها را در بین کاربران داشتهاند.
اگر شما هم دوست دارید وقتی کاربران، پستها و نظرات وبلاگ یا سایت شما را میخوانند، ایموجیها را دقیقاً با ظاهر جذاب آیفون ببینند، این آموزش کوتاه و کاربردی برای شماست!
برای انجام این کار نیازی به نصب افزونههای سنگین ندارید و فقط با چند خط کد CSS میتوانید این قابلیت را به سایت خود اضافه کنید. مراحل زیر را قدم به قدم انجام دهید:
💠 مرحله اول: معرفی فونت ایموجی به قالب
ابتدا باید فایل فونت ایموجیهای iOS را به قالب سایت خود بشناسانید. برای این کار به بخش ویرایش کدهای CSS قالب خود (معمولاً بین تگ <style> و </style>) بروید و کد زیر را در بالاترین قسمت آن قرار دهید:
@font-face {
font-family: 'iOS-Emoji';
src: url('https://rozup.ir/view/4221218/iOS16_14.ttf') format('truetype');
unicode-range: U+1F300-1F5FF, U+1F900-1F9FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF, U+2700-27BF;
font-display: swap;
}با این کد، سایت شما فایل فونت ایموجیها را به صورت مستقیم بارگذاری میکند.
💠 مرحله دوم: اعمال فونت روی متنهای سایت
حالا که فونت را معرفی کردیم، باید به سایت بگوییم که برای نمایش ایموجیها از آن استفاده کند. در کدهای CSS قالب خود به دنبال تگ body بگردید و نام فونت 'iOS-Emoji' را در بخش font-family، دقیقاً بعد از فونت اصلی سایت اضافه کنید.
برای مثال، اگر فونت اصلی سایت شما Vazir است، کد شما باید به این شکل تغییر کند:
body {
font-family: 'Vazir', 'iOS-Emoji', sans-serif;
}💡 یک نکته بسیار مهم:
شاید بپرسید چرا فونت ایموجی را در جایگاه دوم نوشتیم؟ دلیلش این است که مرورگر ابتدا حروف فارسی و انگلیسی سایت را با فونت زیبای «Vazir» میخواند. اما وقتی در متن به یک “ایموجی” میرسد که در فونت وزیر وجود ندارد، به صورت خودکار سراغ فونت دوم یعنی 'iOS-Emoji' میرود و ایموجیها را با ظاهر آیفون نمایش میدهد!
به همین سادگی! حالا قالب خود را ذخیره کنید و سایتتان را رفرش کنید (اگر تغییرات را ندیدید، کلیدهای Ctrl + F5 را بزنید تا کش مرورگر پاک شود). از ایموجیهای جذاب آیفون در سایتتان لذت ببرید! 😍🚀
💻 آموزش ویدیویی :