در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت صفر تا صد قسمت 25 : کار با فونت های شخصی در CSS

در قسمت قبل که کار طراحی قالب وب سایت خبری را در نرم افزار فتوشاپ انجام دادیم، برای فونت های قالب از فونت Yekan استفاده کردیم و باید از همین فونت زمان نوشتن کد صفحات وب سایت خبری استفاده کنیم. اما ممکن است که فونت مورد نظر بر روی سیستم شخصی که در حال مشاهده وب سایت ما هست نصب نشده باشد. برای رفع این مشکل امکان قرار دادن فونت ها در کنار وب سایت وجود دارد. با این کار و زمانی که کاربر درخواست مشاهده صفحات وب سایت ما را به سمت سرور ارسال می کند، فونت های مورد استفاده با درخواست کاربر بر روی سیستم او دانلود شده و فونت های وب سایت به صورت صحیح نمایش داده می شوند. در قسمت بیست و چهارم از دوره آموزشی طراحی وب با font-face و نحوه استفاده از فونت های دلخواه در صفحات وب آشنا خواهیم شد. مطالبی که در این قسمت خواهید آموخت:

  1. نحوه دریافت مجموعه فونت های فارسی برای استفاده در صفحات وب
  2. آشنایی با font-face در css برای اضافه کردن فونت ها به صفحات وب سایت
  3. بررسی انواع فرمت فونت های قابل استفاده در صفحات وب و تفاوت میان آن ها
  4. آشنایی با font های موجود در googleapi و نحوه استفاده از آن ها

تهیه کننده: حسین احمدی
منبع: ITpro
#انواع_فونت_فارسی_برای_طراحی #آموزش_html #آموزش_طراحی_وب_سایت #فونت_فارسی_مناسب_طراحی #آموزش_طراحی_وب #افزودن_فونت_با_@font-face
عنوان
1 آموزش طراحی سایت صفر تا صد قسمت 1 : مقدمه ای بر دوره 23′:39″ رایگان
2 آموزش طراحی سایت صفر تا صد قسمت 2 : ساختار HTML 32′:29″ 5,500
3 آموزش طراحی سایت صفر تا صد قسمت 3 : قالب بندی متن ها 41′:38″ 5,500
4 آموزش طراحی سایت صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML 50′:55″ 6,600
5 آموزش طراحی سایت صفر تا صد قسمت 5 : استفاده از Link ها 37′:28″ 4,400
6 آموزش طراحی سایت صفر تا صد قسمت 6 : کار با تصاویر در HTML 27′:0″ رایگان
7 آموزش طراحی سایت صفر تا صد قسمت 7 : کار با جداول در HTML 36′:56″ 4,400
8 آموزش طراحی سایت صفر تا صد قسمت 8 : فرم ها و ورود اطلاعات 54′:58″ 8,250
9 آموزش طراحی سایت صفر تا صد قسمت 9 : آشنایی اولیه با CSS 48′:21″ رایگان
10 آموزش طراحی سایت صفر تا صد قسمت 10 : کار با فونت و متن در CSS 32′:47″ 5,500
11 آموزش طراحی سایت صفر تا صد قسمت 11 : بک گراند در CSS 21′:0″ 4,400
12 آموزش طراحی سایت صفر تا صد قسمت 12 : Display و Visibility در CSS 11′:39″ رایگان
13 آموزش طراحی سایت صفر تا صد قسمت 13 : مفهوم BoxModel 31′:15″ 7,700
14 آموزش طراحی سایت صفر تا صد قسمت 14 : Position ها در HTML و CSS 27′:31″ 6,600
15 آموزش طراحی سایت صفر تا صد قسمت 15 : استفاده از Pseudo Class ها 18′:36″ رایگان
16 آموزش طراحی سایت صفر تا صد قسمت 16 : ایجاد Navigation ها 16′:3″ 5,500
17 آموزش طراحی سایت صفر تا صد قسمت 17 : ایجاد منوهای کشویی با HTML 21′:48″ 5,500
18 آموزش طراحی سایت صفر تا صد قسمت 18 : ایجاد Mega Menu در CSS 9′:13″ رایگان
19 آموزش طراحی سایت صفر تا صد قسمت 19 : خاصیت Float و Layout صفحات 34′:23″ 7,150
20 آموزش طراحی سایت صفر تا صد قسمت 20 : آشنایی با Pseudo Element ها 15′:52″ رایگان
21 آموزش طراحی سایت صفر تا صد قسمت 21 : آشنایی با Grid System 1:5′:29″ 10,450
22 آموزش طراحی سایت صفر تا صد قسمت 22 : آموزش CSS Reset 6′:32″ رایگان
23 آموزش طراحی سایت صفر تا صد قسمت 23 : آموزش HTML5 34′:56″ 4,070
24 آموزش طراحی سایت صفر تا صد قسمت 24 : طراحی وب سایت خبری : بخش 1 47′:39″ 5,500
25 آموزش طراحی سایت صفر تا صد قسمت 25 : کار با فونت های شخصی در CSS 15′:57″ رایگان
26 آموزش طراحی سایت صفر تا صد قسمت 26 : طراحی وب سایت خبری : بخش 2 1:2′:1″ 7,700
27 آموزش طراحی سایت صفر تا صد قسمت 27 : طراحی وب سایت خبری : بخش 3 37′:24″ 3,300
28 آموزش طراحی سایت صفر تا صد قسمت 28 : آموزش CSS3 21′:0″ رایگان
29 آموزش طراحی سایت صفر تا صد قسمت 29 : Background و Color در CSS3 23′:45″ 4,400
30 آموزش طراحی سایت صفر تا صد قسمت 30 : آشنایی با Gradient در CSS3 17′:9″ رایگان
31 آموزش طراحی سایت صفر تا صد قسمت 31 : کار با سایه ها در CSS3 21′:25″ 6,050
32 آموزش طراحی سایت صفر تا صد قسمت 32 : کار با متن در CSS3 10′:48″ رایگان
33 آموزش طراحی سایت صفر تا صد قسمت 33 : Transform ها در CSS3 18′:2″ 4,950
34 آموزش طراحی سایت صفر تا صد قسمت 34 : محیط سه بعدی (3D) در CSS 17′:11″ 4,950
35 آموزش طراحی سایت صفر تا صد قسمت 34 : Transition در CSS3 15′:51″ رایگان
36 آموزش طراحی سایت صفر تا صد قسمت 36 : ایجاد مکعب سه بعدی (3D Cube) 20′:23″ 6,050
37 آموزش طراحی سایت صفر تا صد قسمت 37 : ایجاد Animation در CSS3 23′:28″ 5,500
38 آموزش طراحی سایت صفر تا صد قسمت 38 : Multiple Columns 16′:21″ رایگان
39 آموزش طراحی سایت صفر تا صد قسمت 39 : آشنایی با Flexbox در CSS3 18′:27″ رایگان
40 آموزش طراحی سایت صفر تا صد قسمت 40 : طراحی واکنشگرا یا Responsive 33′:35″ 9,790
41 آموزش طراحی سایت صفر تا صد قسمت 41 : تکنیک Sprite Images 20′:5″ 4,950
42 آموزش طراحی سایت صفر تا صد قسمت 42 : آشنایی با Font Awesome 19′:38″ رایگان
43 آموزش طراحی سایت صفر تا صد قسمت 43 : آشنایی با تکنیک Flipcard 13′:26″ 4,290
44 آموزش طراحی سایت صفر تا صد قسمت 44 : تکنیک Hover Effect 17′:23″ رایگان
45 آموزش طراحی سایت صفر تا صد قسمت 44: آموزش جاوااسکریپت 15′:49″ رایگان
46 آموزش طراحی سایت صفر تا صد قسمت 46 : مفاهیم اولیه جاوا اسکریپت 20′:10″ رایگان
47 آموزش طراحی سایت صفر تا صد قسمت 47 : نوع های داده و عملگرها 42′:24″ 8,250
48 آموزش طراحی سایت صفر تا صد قسمت 48 : مباحث تکمیلی نوع های داده 30′:15″ رایگان
49 آموزش طراحی سایت صفر تا صد قسمت 49 : آشنایی با حلقه ها (Loops) 21′:0″ 4,950
50 آموزش طراحی سایت صفر تا صد قسمت 50 : دستورات کنترلی if و switch 19′:31″ رایگان
51 آموزش طراحی سایت صفر تا صد قسمت 51 : آشنایی با توابع (Functions) 18′:34″ 5,500
52 آموزش طراحی سایت صفر تا صد قسمت 52 : آموزش کار با DOM 40′:16″ 9,350
53 آموزش طراحی سایت صفر تا صد قسمت 53 : آموزش کار با DOM 14′:15″ 4,950
54 آموزش طراحی سایت صفر تا صد قسمت 54 : آموزش کار با DOM 5′:31″ رایگان
55 آموزش طراحی سایت صفر تا صد قسمت 55 : آموزش کار با DOM 54′:9″ 8,800
56 آموزش طراحی سایت صفر تا صد قسمت 56 : آشنایی با BOM 28′:25″ رایگان
57 آموزش طراحی سایت صفر تا صد قسمت 57 : کار با فرم ها در JavaScript 34′:19″ 4,950
58 آموزش طراحی سایت صفر تا صد قسمت 58 : آموزش Timing Events 12′:16″ رایگان
59 آموزش طراحی سایت صفر تا صد قسمت 59 : چند مثال کاربردی JavaScript 32′:45″ 4,950
زمان و قیمت کل 26:21′:5″ 210,650
5 نظر
حمیده سلامی

باسلام یک سوال فنی؟ داخل تگ title یا مثلا در قسمت اتریبیوت h1 نمیشه فارسی نوشت ؟؟ چون من یک کدی نوشتم با استفاده از تگ هایی که گفتید بعد قسمت هایی که فارسی نوشتم رو نشون نمیده بجاش علامت میاد.مرورگر هم کروم هست.

حسین احمدی

سلام، تو قسمت های اولیه آموزش گفتم که باید تگ meta charset رو استفاده کنید، اگر هم از notepad++ استفاده می کنید باید حالت encoding رو به صورت صحیح انتخاب کنید.

حمیده سلامی

صفحه .html است ولی فارسی ها رو نشون نمیده؟؟!! چطور میشه از تگ meta charset در اتریبیوت title تگ h1 استفاده کرد؟؟

یا تگ title که داخل تگ head نوشته میشه؟؟؟

(با عرض پوزش من سه تا ویدیو اول رو مشاهد کردم باید در ویدیو 3 سوالم رو می پرسیدم متاسفانه چون این بخش رو با این قسمت بوک مارک کرده بودم سوالم رو اشتباها در این قسمت پرسیدم)

zahra .m

سلام استاد، وقت بخیر

سؤال بنده اینه که اگر بخوایم هم از زبان فارسی و هم انگلیسی در صفحمون استفاده کنیم ، چطوری باید font face رو برای هر دو زبان تعریف کنیم؟

لطفاً راهنمایی بفرمایید

حسین احمدی

سلام، وقت بخیر

معمولاً فونت های انگلیسی که به صورت پیش فرض بر روی سیستم نصب هستن استفاده میشه، اما اگر فونت دیگه ای مد نظرتون هست می تونید چند font face تعریف کنید یا اینکه فایل های css جداگانه برای فارسی و انگلیسی ایجاد کنید و داخل هر کدوم font face مربوط به همون زبان رو تعریف کنید و بر اساس زبان وب سایت فایل css مورد نظر رو include کنید.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....