استفاده از فونت دلخواه از نسخه CSS3 امکان پذیر شد. قبل از CSS3 طراحان وب فقط میتوانستند از فونتهای موجود و نصب شده در سیستم عامل کاربران برای نمایش متنشان اسفاده کنند. ولی از نسخه CSS3 به بعد طراحان وب میتوانند از هر فونتی که دوست دارند و یا حتی خودشان طراحی کرده انددر نمایش متن موجود در صفحه وب استفاده کنند.
وقتی که شما فونت مورد نظر را پیدا کردید و یا آن را طراحی کردید، باید فایل فونت را بر روی هاست آپلود کنید تا مرور گر کاربر آنها را به صورت اتوماتیک دانلود کرده و استفاده کند.
فونت شما در CSS3 از طریق font-face@ تعریف خواهد شد.
مرورگرهای سازگار با font-face@ :
تمام مرورگرها بر اساس استانداردهای بین المللی وب و با توجه به افزایش روز افزون استفاده طراحان از CSS3 تلاششان را برای انتقال به CSS3 انجام میدهند. اما مهمترین مرورگرهای وب که از این ویژگی استفاده میکنند به قرار زیر است:
Google Chrome – FireFox – Safari – Opera با فونتهای ttf و otf به ترتیب True Type Fonts و OpenType Fonts سازگاری دارند.
IE9 به بالا font-face@ را حمایت میکند ولی فقط از فونتهای Embedded OpenType) eot) میتوان استفاده کرد.¹
توجه: در نظر داشته باشید که مرورگر IE8 و پایین تر با font-face@ سازگاری ندارند.
چگونه از فونت دلخواه در طراحی وب استفاده کنیم؟
در font-face@ ابتدا باید یک نام برای فونت مورد نظر تعیین کرده سپس آدرس فونت را تعریف کنیم
@font-face {
font-family: myFirstFont;
src: url('iransans_normal.ttf'),
url('iransans_normal.eot'); /* IE9+ */
}
div {
font-family:myFirstFont;
}در مثال بالا myFirstFont نامی است که برای فونت مورد نظر (iransans) انتخاب کرده ایم.
چگونه فونت استفاده شده در font-face@ را Bold کنیم؟
برای این کار باید هنگام تعریف فونت ، از فونتهای Bold استفاده کنید و در تعریف آن نوع فونت را Bold تعریف کنید:
@font-face {
font-family: myFirstFont;
src: url('iransans_Bold.ttf'),
url('iransans_Bold.eot'); /* IE9+ */
font-weight:bold;
}در واقع فونت iransans_Bold فونت دیگری است که به صورت جداگاه تعریف میشود و بر روی هاست قرار میگیرد.
توجه: به تعداد فونتهایی که میخواهید استفاده کنید این روش را تکرار نمایید.
¹. برای ساخت فونتهای سازگار با font-face@ با انواع فرمتهای ذکر شده از روی فونت خودتان به وبسایت fontsquirrel مراجعه کنید.
* برگرفته از: w3schools
سلام . واقعا ممنونم . بسیار عالی بود
سلام
وقتتون بخیر
من در مورد تغییر فونت سرویسای ایمیلی مثل میل چیمپ سوال داشتم
من این کد css رو که مربوط به تغییر فونت در میل چیمپ هست رو در اختیار دارم که باید اونو در قسمت body نوشته قرار بدم
وقتی این کد رو قرار میدم فونت ایران سنس رو برای من اجرا میکنه
ولی من میخوام فونت دلخواه خودم رو اجرا کنه
توی این کد درج شده که آدرس فونت دلخواه خود را وارد کنید، من متوجه این بخشش نمیشم
ممنون میشم راهنمایی کنید.
<link href="Your Persian Font Server Address" rel="stylesheet" type="text/css" /> <style type="text/css">h1,h2,h3,h4,h5,p,a{ font-family: 'iransans', serif !important; font-weight: 300 !important; } </style>منظورشون همین لینک فایل css هست که در آموزش بالا توضیح داده شده. فایلها و فونت ها باید در سرور خودتون میزبانی بشه.
از چه قسمتی باید فونت رو پیدا (و یا آپلود) کنم؟
ممنون میشم بیشتر توضیح دهید.
@font-face{ font-family: 'BYekan'; src: url('fonts/BYEKAN.eot?')format('eot'), url('fonts/BYEKAN.woff') format('woff'), url('fonts/BYEKAN.ttf') format('truetype'); } @font-face{ font-family: 'BKOODAKBOLD'; src: url('fonts/BKOODAKBOLD.eot?')format('eot'), url('fonts/BKOODAKBOLD.woff') format('woff'), url('fonts/BKOODAKBOLD.ttf') format('truetype'); }به نظر من مشکل این تو بزرگ یا کوچیک بودن حروفه مثلا BKOODAKرو دقیقا باید مثل حروف فونتی که داخل cssهستش باید تنظیم کنی برای اطمینان از روی اسم فونت داخل css کپی بگیر و بعد اینجا paste کن
من فونتی که میخام رو تو css همونطوری که گفتید قرار دادم……. ولی نمیشه که نمیشه
@font-face{ font-family: 'BYekan'; src: url('fonts/BYEKAN.eot?')format('eot'), url('fonts/BYEKAN.woff') format('woff'), url('fonts/BYEKAN.ttf') format('truetype'); } @font-face{ font-family: 'BKOODAKBOLD'; src: url('fonts/BKOODAKBOLD.eot?')format('eot'), url('fonts/BKOODAKBOLD.woff') format('woff'), url('fonts/BKOODAKBOLD.ttf') format('truetype'); }کجاش مشکل داره میشه بگید؟؟؟؟؟؟ممنون میشم
اینو امتحان کنید:
@font-face { font-family: 'yekan'; src: url('BYekan.eot'); src: url('BYekan.eot') format('embedded-opentype'), url('BYekan.woff') format('woff'), url('BYekan.ttf') format('truetype'); font-weight: normal; font-style: normal; }اینم کدیه که تو همین سایت دارم استفاده میکتم:
@font-face { font-family : terafik; src : url('../fonts/terafik.ttf') format('truetype'); } @font-face { font-family : iransans; src : url('../fonts/iransans.ttf') format('truetype'); }سلام
خیلی ممنون بخاطر ارجاعی که دادید. من همه این موارد رو رعایت کردم اما فونتی که گذاشتم باز هم فقط داخل کروم نمایش داده میشه نه فایرفاکس! ): n تا راه رو تست کردم اما جواب نداد، به نظرتون باید دنبال چی باشم؟ چه مشکلی میتونه وجود داشته باشه؟ من سایت H-Javedan.com رو تو سه تا کامپیوتر مختلف تست کردم اما تو هیچ فایرفاکسی فونت یکان و نازنین و… جواب نداد! فقط تاهوما!!!
شما از فونت ttf استفاده میکنید؟ به سورس وبسایت ما هم یه نگاه بکنید. چون به خوبی کار میکنه.
این هم مستندات استفاده از font face هست که توسط بنیاد موزیلا نوشته شده. اینم میتونه مفید باشه.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
ببخشید این فایل css که میگید داخل اون گوگل فونت رو تغییر بدیم کجاست ؟!
دیگه اعصاب برام نمونده
هر جا میرم میگن فایل css هیچکی نمیگه این فایله اخه کجاست
؟!!!!!!!!!!!!!!
سلام
من از گوگل فونت حرفی نزدم فک کنم!!!!
فایل css فایلی هست که استایل صفحه وب رو تو اون مشخص میکنن و هر صفحه وبی که در وبسایت هست این فایل رو در صورت لزوم لود میکنه. بعضی وقتها شاید فایل css وجود نداشته یاشه (در طراحی های کوچک مثلا نیم صفحه ای) و به جای اون از تگ
تشکر فراوان دوست خوبم
خوش اومدید خواهش میکنم.