آموزش افزودن فونت فارسی به قالب سایت

آموزش افزودن فونت فارسی به قالب سایت

می پسندم
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
3,876 بار
0 نظر
محمد رحمتی
۱۵ دی ۱۳۹۳

add web font - آموزش افزودن فونت فارسی به قالب سایت

آموزش اضافه کردن فونت فارسی به قالب سایت

+ بهمراه ۴۰ فونت فارسی اصلاح شده

در بسیاری از سایت های ایرانی مشاهده کرده اید که قسمت های مشخص شده ای از وب دارای فونت گرافیکی و فارسی برای مثال یکان می باشد. ما به شما آموزش می دهیم چطور این کار را انجام دهید. فقط با دانش CSS و HTML می توانید اقدام به چنین کاری بکنید. برای مشاهده و یادگیری آموزش با ما باشید.

قدم اول :

  • آپلود فونت ها :

برای این کار شما نیاز به آپلود فونت ها بر روی هاست خود دارید. فونت ها در چهار فرمت svg ,ttf , woff , eot می باشند. فونت های ttf همان فونت های کامپیوتر خود می باشد و سه فونت دیگر هم فونت های وب هستند ، بنابراین فونت ها را در یک پوشه دلخواه آپلود کنید.

نکته : برای تبدیل فونت ها می توانید از سایت تبدیل آنلاین فونت استفاده کنید.

قدم دوم :

  • آموزش نوشتن کد css :
@font-face {
 font-family: 'Yekan';
 src: url('Fonts/Yekan.eot');
 src: local('BYekan'), url('Fonts/Yekan.woff') format('woff'), url('Fonts/Yekan.ttf') format('truetype'), url('Fonts/Yekan.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

 کد فوق برای فونت یکان Yekan است و شما می توانید اسم هر فونت دیگری که دوست داشتید اضافه کنید. همچنین محل فونت ها برای این کد پوشه Fonts می باشد شما آدرس کامل فونت خود را وارد کنید.

  1. فراخوانی کد ها :

در فایل استایل وب خود محلی که می خواهید فونت یکان نمایش داده شود شبیه استایل زیر کد بنویسید. قسمت font : Yekan خیلی مهم است و نام فوق باید بصورت صحیح وارد شود (حساس به حروف بزرگ یا کوچک نیست).

.posts .title h1 {
font: 20px/15px Yekan,Tahoma;
letter-spacing:1px;
margin: 10px 0px;
}

خوب حال برای فراخونی در صفحه HTML وب خود به صورت زیر عمل کنید. (کد فوق عنوان مطلب شما در وردپرس می باشد.)

<div class="posts">
<div class="title">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
</div>
<?php the_content(''); ?>
</div>

موفق باشید.

اطلاعات

دیدگاه کاربران

هنوز هیچ دیدگاهی وجود ندارد

مقالات مرتبط

در این آموزش وردپرس، شما را در فرآیند ساخت وب سایت چند زبانه راهنمایی می نماییم. شما متوجه خواهید شد...
به عنوان یک صاحب وب سایت، موارد متعددی وجود دارد که می خواهید سایت خود را در حالت تعمیر حفظ...
پیوند یکتا نام دیگری است که به URL صفحه وب می گویند. زمانی که شما مقاله ای را مشاهده می...
در این مقاله مرحله به مرحله، آموزش ساخت وب سایت با المنتور را در چند مرحله به شما نشان می...