جاسازی فونت وب در این مرحله بهطور گسترده توسط مرورگرهای مدرن پشتیبانی میشود که واقعاً هیچ بهانهای برای عدم استفاده از آنها در طراحیهای خود وجود ندارد. صدها فونت رایگان برای جاسازی و همچنین خدمات پولی زیادی وجود دارد که به شما امکان می دهد فونت های تجاری را در طرح های خود بگنجانید.
به نظر می رسد بسیاری از طراحان از ایده تعبیه @font-face می ترسند. اگرچه در چند سال گذشته محبوبیت و پشتیبانی به دست آورده است، بسیاری از طراحان هنوز به مجموعه معمول خود از فونت های امن وب برای اکثریت قریب به اتفاق طرح های خود پایبند هستند. در موارد نادری که از منطقه آسایش خود خارج میشوند و فونت وب را اضافه میکنند، به جای اینکه به جاسازی DIY یا چیزی شبیه فونت های وب Google.
در این مقاله، همه چیزهایی را که برای شروع جاسازی فونتهای خود و شروع استفاده از فونتهای وب Google نیاز دارید به شما ارائه میدهم. کد به خودی خود ساده است، و من دقیقاً دلیل استفاده از کدی که استفاده می کنیم را نیز توضیح خواهم داد. من حتی ده نمونه عالی از ترکیب فونت های وب را به شما ارائه می کنم که می توانید در صورتی که هنوز با ترکیبات تایپ فیس راحت نیستید، آنها را روی طرح های خود پیاده سازی کنید.
موارد قانونی مرتبط با جاسازی فونت
مهم است که با بحث در مورد مسائل حقوقی که می تواند هنگام جاسازی فونت در وب سایت شما وجود داشته باشد، شروع کنید. همه فونت ها برای این نوع استفاده مجوز ندارند، به ویژه فونت های تجاری. برخی نیاز به مجوزهای طولانی دارند، در حالی که برخی دیگر با هم از این عمل جلوگیری می کنند (یا خدماتی را می فروشند تا جاسازی را برای شما انجام دهد).
برای اطمینان از مجاز بودن جاسازی @font-face برای هر قلمی که قصد استفاده از آن را دارید، EULA مهم است. در غیر این صورت، باید فونت دیگری را انتخاب کنید، دریابید که آیا مجوز جداگانهای وجود دارد که میتوانید بخرید یا خیر، یا ببینید آیا یکی از خدمات فونت وب موجود شامل فونت انتخابی شما است یا خیر.
گزینه هایی برای جاسازی
جاسازی فونتها با @font-face چندان پیچیده نیست، اما فرآیندی چند مرحلهای است. چند راه مختلف برای انجام این کار وجود دارد، از جمله برخی خدمات رایگان و پولی و همچنین یک روش کاملاً DIY.
جاسازی DIY
برای بهترین نتایج و جامعترین پشتیبانی مرورگر، میخواهید از ابزاری مانند Font Squirrel’s @font-face Generator استفاده کنید. این ابزار رایگان به شما امکان می دهد هر قلمی را که مجوزهای مناسبی برای آن دارید آپلود کنید و آن را به انواع فایل فونت پشتیبانی شده برای مرورگرهای مختلف تبدیل کنید.
هنگامی که بسته فونت خود را دارید، می خواهید آن را در سرور خود آپلود کنید، احتمالاً در فهرستی به نام “fonts” یا چیزی مشابه. پس از آپلود، وارد CSS سایت خود می شوید و کد زیر را وارد می کنید:
@font-face {
font-family: "Dancing Script";
src: url("fonts/DancingScript.eot");
src: local("#")،
فرمت url("fonts/DancingScript.ttf") ("truetype"),
فرمت url("fonts/DancingScript.woff") ("woff")،
فرمت url("fonts/DancingScript.svg") ("svg");
}
خط به خط، این به صورت زیر تقسیم می شود:
font-family: "Dancing Script";
این قسمت نام فونت را مشخص میکند تا بتوانیم بعداً آن را در سبکهای خود صدا کنیم.
src: url("fonts/DancingScript.eot");
فایلهای EOT توسط Internet Explorer 4.0 و جدیدتر پشتیبانی میشوند. بدون این فایل، پیادهسازی @font-face شما در نسخههای IE قدیمیتر از 9.0 کار نخواهد کرد.
src: local("#")،
این خط از بارگیری یک فونت محلی، در صورت وجود، جلوگیری می کند. در حالی که برخی از برنامه نویسان ترجیح می دهند فونت محلی را برای صرفه جویی در پهنای باند داشته باشند، احتمال ایجاد مشکل ممکن است بیشتر از مزایای آن باشد. اگر شخصی نسخه متفاوتی از فونت را به صورت محلی نصب کرده باشد (یا مثلاً یک نسخه غیرقانونی ضعیف)، می تواند تأثیر زیادی بر ظاهر طراحی شما داشته باشد. به نظر من، بهتر است آن را ایمن بازی کنید و کنترل کامل روی فونت هایی که دقیقاً بارگیری می شوند، حفظ کنید.
قالب
url("fonts/DancingScript.ttf") ("truetype")،
فونت های TrueType با Mozilla 3.5+، Safari 3.1+، Opera 10+ و Chrome 2.0+ سازگار هستند.
قالب
url("fonts/DancingScript.woff") ("woff")،
این فایل .woff از IE 9+، Mozilla 3.6+، Safari 5.1+، Opera Presto و Chrome 5.0+ مراقبت میکند.
فرمت
url("fonts/DancingScript.svg") ("svg");
این قالب نهایی از Safari 3.1+، Opera 9+ و Chrome 0.3+ مراقبت میکند. SVG همچنین برای iPad و iPhone Safari ضروری است، زیرا در حال حاضر با سایر قالبهای فونت کار نمیکند.
استفاده از چندین فرمت فونت برای حداکثر سازگاری مرورگر مهم است. ما در اینجا فونتهای OpenType (otf) را کنار گذاشتهایم، زیرا آنها هیچ گونه سازگاری با فونتهای TrueType اضافه نمیکنند (و فونتهای TrueType با Chrome سازگار هستند، در حالی که فونتهای OpenType سازگار نیستند).
اکنون، وقتی آماده هستید که فونت را در CSS خود فراخوانی کنید، با آن مانند یک فونت معمولی ایمن وب رفتار می کنید.
h1 { font: 24px "Dancing Script", "Times New Roman", serif; }
مطمئن شوید که فونتهای بازگشتی را مشخص کردهاید تا اگر به دلایلی فونت وب بارگیری نمیشود (یا بازدیدکننده شما از مرورگر پشتیبانینشده استفاده میکند)، همچنان حداقل کنترلی بر ظاهر سایت داشته باشید. اگر این کار را نکنید، فونت پیشفرض بارگیری میشود، و اغلب اوقات این فونت تکفاصله مانند Courier New است.
Google Web Fonts API
فقط چند ماه پیش، Google Web Fonts API فقط شامل چند ده قلم بود . اگر فونتی که می خواهید استفاده کنید گنجانده می شد عالی بود، اما در غیر این صورت کاربرد عملی زیادی نداشت. این تغییر کرده است.
Google اکنون میزبان بیش از 230 خانواده قلم است که بسیاری از آنها دارای چندین سبک یا وزن هستند. و استفاده از همه آنها رایگان است. این یک منبع عالی برای طراحانی است که میخواهند از فونتهای وب استفاده کنند اما لزوماً نمیخواهند فونتهایشان را خودشان میزبانی کنند (احتمالاً به دلیل مشکلات پهنای باند).
Google سه روش مختلف برای فونتهای گنجانده شده ارائه میکند: یک روش استاندارد، که از پیوند به یک صفحه سبک CSS در head شما، یک روش @import و یک جاوا اسکریپت استفاده میکند. روش.
صرف نظر از اینکه تصمیم دارید از کدام یک استفاده کنید، لازم نیست برای هیچ حساب خاصی ثبت نام کنید، و گرفتن فونت ها یک فرآیند یک مرحله ای است (فقط فونت مورد نظر خود را پیدا کنید و سپس روی “استفاده سریع” کلیک کنید. برای دریافت کد).
خدمات قلم
تعداد خدمات فونت دیگری نیز وجود دارد، مانند Typekit و فونت های وب Fonts.com، که اکثر آنها مبتنی بر اشتراک هستند. هزینه های آنها بسیار متفاوت است، همانطور که شرایط آنها نیز متفاوت است. ما آنها را با جزئیات بیشتری در پست قبلیتوضیح دادیم. >.
دلیل اصلی استفاده از یکی از این سرویس ها زمانی است که هر نوع تایپی که می خواهید استفاده کنید (یا به دلیل مشخصات مشتری نیاز به استفاده از آن دارید) برای جاسازی @font-face معمولی مجوز ندارد، اما از طریق یکی از این خدمات در دسترس است. از آنجایی که برخی از خدمات توسط خود ریخته گری های نوع ارائه می شود، انتخاب گسترده تری وجود دارد.
در بیشتر موارد، این سرویسها تا جایی که جاسازی میشوند مانند Google Web Fonts API کار میکنند، اگرچه هر کدام روش خاص خود را دارند. یکی دیگر از مزایای اضافه شده این است که در صورت بروز مشکل در جاسازی یا استفاده از فونت ها، پشتیبانی دریافت می کنید.
زمان استفاده از @font-face
به دلیل پشتیبانی نسبتاً گسترده، @font-face تقریباً در هر وب سایتی قابل استفاده است. این یک راه عالی برای متمایز کردن یک طراحی ساده و تمیز از میلیون ها طرح ساده و تمیز دیگر است. همچنین می تواند شخصیت اضافی را به طرح های بصری پیچیده تر اضافه کند. واقعاً هیچ بهانهای برای استفاده نکردن از فونت عالی برای حداقل سرفصلهای سایتهایی که طراحی میکنید وجود ندارد.
البته، همه این گزینههای جدید میتوانند برای طراحانی که تایپوگرافیهای ماهری نیستند، واقعاً ترسناک باشند. اما خوشبختانه، منابع زیادی برای ترکیب فونتفیسها وجود دارد که میتواند به شما کمک کند تا ترکیبهای خود را پیدا کنید. در همین حال، در زیر ده ترکیبی وجود دارد که میتوانید در حال حاضر استفاده کنید، که از فونتهای رایگان Font Squirrel یا Google Web Fonts API تشکیل شده است.
ترکیب های وب فونت فوق العاده
اگر نمیدانید ترکیب حروف را از کجا شروع کنید، این ترکیبها را برای اندازه امتحان کنید.
سایت کتاب کمیک
اکنون هیچ بهانه ای برای استفاده از Comic Sans در یک وب سایت وجود ندارد!
عنوان کومیکا | نور همکاری | متن کومیکا
سایت کلاسیک و زیبا
این ترکیب کلاسیک و ظریف است، اما همراه با پسزمینه و طرح رنگ مناسب، میتواند تازه و مدرن به نظر برسد.
اسکریپت رقص | Droid Serif | Droid Sans
سایت گرانج
بهتر است تایپ گرانج به عناوین واگذار شود، اما این بدان معنا نیست که نمی توانید حروف بزرگی برای متن دیگر خود نیز پیدا کنید.
Copystruct | محله | میسو
سایت ساده و تمیز
ساده و تمیز به معنای Helvetica استفاده می شود. دیگر نه.
اسوالد | بازیگر | نور دوز ترمینال
گرانج بیشتر
در اینجا یک جایگزین دیگر برای سایتهای سبک گرانج وجود دارد. این یکی در یک سایت مصور نیز به خوبی کار می کند.
FFF TUSJ | Brawler | Perspective Sans
سایت قدیمی
این ترکیب آمریکای اواسط قرن را فریاد میزند.
دم زرد | Josefin Sans Semi-Bold 600 | Rokkitt
سایت زنانه
زنانه لزوماً نباید برابر با ظرافت باشد. جزئیات روی این فونتها یک حس زنانه میدهد، بدون اینکه خجالتی باشد.
Leckerli One | قطعه | آمارانت
سایت بد بو و مدرن
تایپفیسهای بد بو کاراکتر زیادی اضافه میکنند. فقط مطمئن شوید که خوانایی را در ذهن دارید.
Megrim | اندیکا | پوریتان
سایت رسمی
یک سایت رسمی تر به تایپوگرافی رسمی تری نیاز دارد. در اینجا ترکیبی از یک اسکریپت رسمی با حروف سنتی سریف و بدون سریف وجود دارد.
نارنگی | متن زرشکی | روزاریو
سایت های منحصر به فرد و مدرن
یک جفت حروف بی نظیر و منحصر به فرد دیگر. کنتراست بین زوایای تیز عنوان و فونت های بدنه با لبه های گرد فونت متا لمس خوبی است و علاقه زیادی به آن اضافه می کند.
Geostar | کلی اسلب | آرام
نتیجه گیری
همانطور که قبلاً ذکر شد، واقعاً دیگر بهانه ای برای کار نکردن با @font-face وجود ندارد. قوانین تایپوگرافی خوب هنوز هم اعمال می شود و هر آنچه که در مورد ترکیب فونت های امن وب می دانید ادامه دارد. اکنون گزینه های بسیار بیشتری دارید!
چقدر از @font-face در پروژه های خود استفاده می کنید؟ آیا خودتان DIY می کنید یا از خدماتی استفاده می کنید؟ تجربیات و نکات خود را در نظرات به اشتراک بگذارید!
بدون دیدگاه