اتصال فونت های وب با استفاده از @font-face. مشکل حقوقی استفاده از فونت

متن پررنگ

متن پررنگ

بیشتر از حد معمول

کمتر از حد معمول

حروف کج

حروف کج

با خط زیر

خط کشیده شد

قابلیت های ویژگی Style

علاوه بر تگ های توضیح داده شده، چندین روش دیگر برای تغییر فونت در html وجود دارد. یکی از آنها استفاده از ویژگی سبک عمومی است. با استفاده از مقادیر ویژگی های آن، می توانید سبک نمایش فونت ها را تنظیم کنید:

1) font-family - ویژگی خانواده فونت را تنظیم می کند. امکان فهرست کردن چندین مقدار وجود دارد.
تغییر فونت در html به مقدار بعدی در صورتی رخ می دهد که خانواده قبلی روی سیستم عامل کاربر نصب نشده باشد..

نحو نوشتن:

font-family: font-name [, font-name[, ...]]

2) اندازه فونت - اندازه از 1 تا 7 تنظیم می شود. این یکی از راه های اصلی افزایش فونت در HTML است.
نحو نوشتن:

اندازه فونت: اندازه مطلق | اندازه نسبی | معنی | علاقه | ارث بردن

همچنین می توانید اندازه فونت را تنظیم کنید:

• در پیکسل؛
• به صورت مطلق ( xx-کوچک، x-کوچک، کوچک، متوسط، بزرگ);
• بر حسب درصد؛
• در نقاط (pt).

اندازه فونت: 7

اندازه فونت: 24 پیکسل

اندازه قلم: x-large

اندازه قلم: 200%

اندازه قلم: 24pt

سبک فونت: معمولی | مورب | مایل | ارث بردن

ارزش ها:

• عادی - املای معمولی؛
• مورب – ایتالیک;
• مایل - فونت مایل به سمت راست.
• inherit - املای عنصر والد را به ارث می برد.

نمونه ای از نحوه تغییر فونت در html با استفاده از این ویژگی:

font-style: inherit

سبک فونت: مورب

سبک فونت: معمولی

font-style: oblique

نوع فونت: عادی | کلاهک های کوچک | ارث بردن

نمونه ای از نحوه تغییر فونت در html با این ویژگی:

font-variant: inherit

font-variant: normal

font-variant:small-caps

وزن قلم: پررنگ‌تر|سبک‌تر|معمولی|100|200|300|400|500|600|700|800|900

ارزش ها:

• bold – فونت html را روی پررنگ قرار می دهد.
• bolder - جسورتر نسبت به عادی;
• سبک تر - نسبت به حالت عادی کمتر اشباع شده است.
• عادی - املای معمولی؛
• 100-900 - ضخامت فونت را در معادل عددی تنظیم می کند.

فونت-وزن: پررنگ

وزن قلم: پررنگ تر

وزن قلم: سبکتر

فونت-وزن: عادی

وزن قلم: 900

وزن فونت: 100

ویژگی فونت html و رنگ فونت

فونت یکی دیگر از ویژگی های ظرف است. در داخل خود، مقادیر چندین ویژگی را که برای تغییر فونت در نظر گرفته شده بود، ترکیب کرد. نحو فونت:

فونت: اندازه فونت font-family | ارث بردن

مقدار را همچنین می توان روی فونت های استفاده شده توسط سیستم در برچسب های کنترل های مختلف تنظیم کرد:

• عنوان - برای دکمه ها؛
• نماد - برای نمادها؛
• منو - منو؛
• جعبه پیام - برای جعبه های محاوره ای.
• زیرنویس کوچک - برای کنترل‌های کوچک؛
• نوار وضعیت – فونت نوار وضعیت.

در این مقاله آموزشی به شما خواهم گفت که چگونه با استفاده از آیکون هایی که خودتان ایجاد کرده اید، فونت خود را برای یک وب سایت ایجاد کنید. تنها چیزی که ما برای این کار نیاز داریم یک برنامه برای ایجاد گرافیک برداری (Adobe Illustrator یا Inkspcape) و دسترسی به اینترنت است. پس بیایید شروع کنیم! می توانید تمام تصاویر، آیکون ها و فونت css مورد استفاده برای این کار را در انتهای مقاله دانلود کنید.

برای این آموزش ما یک کار ساده انجام می دهیم. برای اولین نماد یک ستاره معمولی ترسیم می کنیم. برای نماد دوم - یک عقاب با حرف W در داخل. کشیدن آن بسیار آسان است و می توانید هر شکل و ترکیبی را ایجاد کنید. من برای این اهداف از illustrator استفاده کردم.

پس از تکمیل بخش خلاقانه، ساخته شما باید در قالب SVG ذخیره شود. روی "ذخیره به عنوان" کلیک کنید و نوع فایل را به عنوان SVG انتخاب کنید. اکنون می توانید مستقیماً به ایجاد فونت ادامه دهید.

برای این منظور، ما از سرویس محبوب و رایگان IcoMoon استفاده می کنیم.

اولین کاری که باید انجام دهید این است که یک پروژه جدید ایجاد کنید، بنابراین روی منوی گوشه سمت چپ بالا کلیک کنید و روی "پروژه جدید" کلیک کنید. در مرحله بعد، فایل های آماده svg خود را پس از کلیک بر روی دکمه "Import Icons" بارگذاری می کنیم. پس از انجام این مراحل، باید تصویری مانند این را در مانیتور خود مشاهده کنید:

حالا ما این قابلیت را داریم که کد هر آیکون (در مورد ما e600 و e601 خواهد بود)، نام فونت، پیشوند CSS و غیره را تغییر دهیم. همه اینها در "تنظیمات" انجام می شود. همچنین، می‌توانیم با کلیک روی پیوند «فعال کردن استفاده سریع» فونت را در عمل مشاهده کنیم - که به ما امکان می‌دهد یک پیوند موقت به فونت خود و همچنین گزینه مشاهده کد در CodePen را دریافت کنیم.

بعد از اینکه همه چیز را پیکربندی کردید، روی دکمه «دانلود» در پایین صفحه کلیک کنید و آرشیو را دانلود کنید. در این آرشیو فونت خود را با فرمت های ttf، eot، svg و woff + یک صفحه نمایشی با فونت پیدا خواهید کرد.

استفاده از آیکون های موجود در سایت

اکنون، تنها چیزی که نیاز داریم این است که فونت CSS را با استفاده از @font-face اضافه کنیم و پارامترهای دیگر را مشخص کنیم (همه آنها در فایل css در آرشیوی که دانلود کرده‌اید نوشته شده‌اند.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; speak: none; font-variant: normal-height: 1 -صاف کردن: مقیاس خاکستری ) .wdm-star:before ( محتوا: "\e600"; ) .wdm-eagle:before ( محتوا: "\e601"; )

اکنون می توانیم از فونت خود در کدهای HTML مانند زیر استفاده کنیم:

تعیین نام کلاس برای تگ ما نماد خود را دریافت می کنیم.

ما مجموعه ای از خدمات رایگان را برای طراحان به شما ارائه می دهیم. این اولین گزینه است، قصد داریم در آینده با افزودن بخش ها و ابزارهای جدید آن را گسترش دهیم.

فونت ها

• Google Fonts کتابخانه فونت مورد علاقه همه است. به شما امکان می دهد فونت های مختلف را برای همه موارد انتخاب و دانلود کنید.
• 1001 فونت رایگان - کتابخانه فونت. ناوبری آسانی دارد - فونت ها هم بر اساس حروف الفبا و هم بر اساس نوع مرتب شده اند. بخشی از فونت های روسی وجود دارد.
• Fontstruct یک طراح فونت آنلاین است. یک ابزار بسیار ساده که به شما امکان می دهد فونت خود را بسازید. شما می توانید نه تنها با مربع های استاندارد، بلکه با اشکال دیگر - نقطه ها، گوشه های گرد و غیره نقاشی کنید.
• Font Squirrel یکی از بزرگترین کتابخانه های فونت است. علاوه بر این، می توانید یک عکس آپلود کنید و نام فونت های استفاده شده در آن را دریافت کنید. یک فروشگاه فونت و حتی یک فروشگاه لباس با آرم وجود دارد.
• Type light یک ویرایشگر فونت با امکانات کامل است. به شما امکان ایجاد، ویرایش و تبدیل فونت های OpenType، TrueType و PostScript را می دهد. نیاز به دانلود و نصب دارد. نسخه رایگان در مقایسه با نسخه رایگان عملکرد محدودی دارد. اما برای ایجاد یک فونت ساده کافی است.
• What Font is یک سرویس آنلاین برای انتخاب فونت وب سایت است. ما فایل فونت را دانلود می کنیم، آدرس سایت را نشان می دهیم و می بینیم که فونت دانلود شده در سایت چگونه به نظر می رسد. سرویس مناسب.
• 1001 فونت - کتابخانه ای از فونت ها (بیش از 15000). پیمایش آسان – فونت را می توان بر اساس اندازه، نوع، موضوع، طرح و غیره انتخاب کرد. منو به شما امکان می دهد خروجی را سفارشی کنید، که این امکان را می دهد که هر فونت را در گزینه های مختلف مشاهده کنید: اندازه، سبک و غیره.
• Font Flame یک سرویس آنلاین برای انتخاب یک جفت فونت سازگار است. بسیار ساده کار می کند - در صفحه اصلی یک ورق با دو کتیبه وجود دارد که با فونت های مختلف ساخته شده است. اگر دوست داشتید، روی «عشق» کلیک کنید، اگر دوست نداشتید، روی «نفرت» کلیک کنید. سپس می توانید موارد انتخاب شده را دوباره مشاهده کنید. با کلیک بر روی نام فونت، فونت گوگل باز می شود.
• Typecast – انتخاب فونت برای نمونه اولیه. می توانید ببینید که فونت در هر دستگاهی چگونه به نظر می رسد. لازم است انواع مختلف متن - عناوین، گیومه ها و غیره را شناسایی کنید. شما می توانید نوع، اندازه، سبک و تورفتگی را انتخاب کنید. صفحه آینده خود را در فونت هایی که نصب کرده اید خواهید دید. یک مزیت بزرگ انتخاب طرح (یک یا چند ستون، چیدمان بلوک های مختلف) است.
• Wordmark - به شما امکان می دهد فونت نصب شده بر روی رایانه کاربر را برای متن، آرم یا عنوان انتخاب کنید. وقتی متنی را در یک فیلد وارد می کنید، آن را با فونت های مختلف نشان می دهد. شما می توانید اندازه، ثبت نام، نمایش سیاه و سفید و یا برعکس را انتخاب کنید. گزینه هایی که دوست دارید در توییتر یا فیس بوک - به انتخاب کاربر - منتشر می شوند. قابل ارسال از طریق ایمیل

عکس های استوک

• Unsplash مجموعه ای از عکس ها است که دائماً به روز می شود. مجموعه ها به موضوعات تقسیم می شوند. شما می توانید هر چیزی را از "آفریقایی-آمریکایی" تا "طبیعت" پیدا کنید. هر عکس امتیاز خاص خود را دارد، می توانید بهترین یا جدید را ببینید.
• FoodiesFeed – عکس غذا. تصاویر به دسته ها تقسیم می شوند. شما می توانید بهترین، انحصاری، آیکون ها، ماکت ها و غیره را انتخاب کنید.
• عکس های رایگان Refe - لیست عظیمی از تصاویر "زندگی واقعی". عمدتا عکاسی منظره و طبیعت. ناوبری ناخوشایند، تمام عکس‌های صفحه اصلی هنگام پیمایش ظاهر می‌شوند.
• تصاویر کوچک – عکس های با کیفیت از مناظر و ساختمان ها. می توانید آرشیو بهترین عکس های ارسال شده در هفته را دانلود کنید. عکس ها دارای برچسب هشتگ هستند، اما دسته بندی نمی شوند.
• Gratisography یک کتابخانه عظیم از عکس های رایگان است. همه عکس ها به شش موضوع تقسیم می شوند: افراد، گریمس ها، شهرها، اشیاء، طبیعت و حیوانات. می توانید با کلمات جستجو کنید.
• مرگ بر سهام عکس – استوک عکس. شما نمی توانید فقط نگاه کنید و انتخاب کنید. آنها یک ماه قبل انتخاب می کنند و بعد از وارد کردن ایمیل به شما اجازه دانلود می دهند. آرشیو حدود 11 مگابایت وزن دارد. بهترین عکس ها و لینک دانلود از طریق ایمیل ارسال می شود.
• Superfamous - مجموعه ای بزرگ از عکس ها از زاویه ای غیرمعمول. مجموعه کوچک اما جالب است.
• کتابخانه الگو - الگوها و بافت ها. مجموعه بسیار بزرگ است، قالب ها غیر معمول هستند. آنها با پیمایش و به تدریج جایگزین می شوند. می‌توانید ببینید که قالب در کل صفحه یا بخشی از آن چگونه به نظر می‌رسد.
• سهام جدید قدیمی – عکس های قدیمی از آرشیو. عکس‌های رایگان کمی وجود دارد، اما عکس‌های جدید مرتب ظاهر می‌شوند.
• Pexels - تعداد زیادی عکس برای همه موارد. آنها بر اساس موضوع تقسیم می شوند، جستجو بسیار آسان است.
• جی مانتری - مجموعه بزرگ عکس. هیچ طبقه بندی به این صورت وجود ندارد، می توانید ماهانه به آن نگاه کنید.

گرافیک سهام

• Brusheezy – براش ها، قالب ها، بافت ها و موارد دیگر برای فتوشاپ رایگان. 12 دسته، هر کدام دارای زیرمجموعه. انتخاب بزرگ است.
• Iconfinder – نمادها، هم پولی و هم رایگان. می توانید با فرمت های ICO، PNG، ICNS، SVG دانلود کنید.
• Brushez مجموعه بزرگی از براش ها برای فتوشاپ است. علاوه بر آنها، بردارهای اولیه، فرم ها، قالب ها، سبک ها نیز وجود دارد. هر بخش به بخش های فرعی تقسیم می شود. به عنوان مثال، بیش از 20 دسته برای برس ها وجود دارد.
• Vecteezy کتابخانه ای از گرافیک های برداری شامل تصاویر و تصاویر است. تعداد زیادی دسته و تعداد زیادی گرافیک.
• Iconbird یک سرویس جستجوی نماد به زبان روسی است. می توانید موضوعی را وارد کنید و مجموعه ای از نمادها را دریافت کنید، یا می توانید بر اساس دسته بندی مرور کنید.
• Icons8 یک سرویس روسی زبان است که بیش از 42000 آیکون در موضوعات مختلف ارائه می دهد.

اینفوگرافیک

• Vizualize یک سرویس آنلاین برای ایجاد اینفوگرافیک "درباره من" است. اساسا یک رزومه گرافیکی ایجاد می کند.
• Canva ابزاری ساده برای ایجاد هر طرحی است. به شما امکان می دهد یک ارائه، پوستر، پست در شبکه های اجتماعی، کتاب، نامه، مطالب و موارد دیگر طراحی کنید. همه چیز بر اساس قالب ها انجام می شود، متن تغییر می کند. اما قالب های زیادی برای انتخاب وجود دارد.
• به راحتی – ایجاد اینفوگرافیک بر اساس الگوها. ویرایشگر آنلاین داخلی به شما امکان می دهد طراحی را تغییر دهید، عناصر اضافی را قرار دهید و متن را تغییر دهید.
• Infogram یک سرویس آنلاین برای ایجاد اینفوگرافیک و نمودارهای تعاملی است. همه توابع در دسترس نیستند، شما باید یک حساب کاربری بخرید.
• Visage ابزاری ساده برای ایجاد هرگونه محتوای بصری (نمودار، اینفوگرافیک، تصاویر وبلاگ و غیره) است. تعداد زیادی قالب، ویرایشگر ساده. برخی از ویژگی ها پرداخت می شود.
• Gliffy یک سرویس آنلاین برای ایجاد نمودار است. ویرایشگر بر اساس اصل Microsoft Visio عمل می کند.
• Visme یک ابزار آنلاین برای ایجاد ارائه و اینفوگرافیک است. بیش از 1000 قالب ویرایشگر به شما امکان می دهد متن (عنوان، لیست ها، نقل قول ها و معمولی)، متن متحرک و ویجت ها را اضافه کنید. در یک حساب کاربری رایگان می توانید آن را به عنوان یک فایل JPG دانلود کنید.
• Piktochart - ایجاد گرافیک با کیفیت بالا - ارائه، اینفوگرافیک یا مواد چاپی. PNG، JPG را در اندازه های مختلف آپلود می کند.
• Drawio یک سرویس آنلاین راحت برای ایجاد نمودار است. می توانید در دراپ باکس و سرویس های مشابه یا روی دیسک ذخیره کنید.
• Venngage – ایجاد آسان اینفوگرافیک ها، پوسترها، گزارش ها، مطالب برای شبکه های اجتماعی و غیره. در نسخه رایگان، فقط یک لینک به نشریه ارائه می دهد. برای دانلود باید پول پرداخت کنید.
• Cacoo یک سرویس آنلاین برای ترسیم نمودار و نقشه سایت است. شاید از نظر قابلیت ها بهترین باشد. تعداد زیادی ابزار و قالب. می توانید به PNG، PDF، SVG، PPT و غیره صادر کنید.
• Creately یک سرویس ترسیم آنلاین است. فقط برای انتشار در دسترس است. برای دانلود هزینه دارد.
• Lucidchart یک سرویس آنلاین برای ایجاد نمودار و نقشه است. امکان وارد کردن نمودار Microsoft Visio وجود دارد. صادرات به PDF، PNG و JPG. قابلیت پرداخت در دسترس است.

رنگ ها

• شکار رنگ - انتخاب ترکیب رنگ. می توانید حداکثر چهار رنگ را انتخاب کنید. راه حل های آماده ای برای انتخاب وجود دارد.
• TinEye – سایت را تجزیه و تحلیل می کند و فهرستی از منابعی را که از تصویری از سایت استفاده می کنند نمایش می دهد.
• ColorZilla - به شما امکان می دهد رنگ ها و گرادیان ها را ایجاد کنید. ویژگی های css را برای آنها نمایش می دهد.
• Adobe Color CC - ایجاد طرح های رنگی.
• Colicious - کلید فاصله را فشار دهید و رنگ جدیدی ایجاد کنید.
• طرح رنگ - انتخاب طرح های رنگی. یک نسخه به زبان انگلیسی و روسی وجود دارد. به شما امکان می دهد رنگ های سایت را انتخاب کنید. تنظیم دقیق دارد و کد رنگ را نشان می دهد. در نهایت، به شما امکان می دهد صفحه را در طرح رنگ انتخاب شده مشاهده کنید. بزرگترین مزیت مشاهده وسعت از نظر انحراف درک رنگ است. همچنین به شما امکان می دهد مدل های رنگی مختلفی را انتخاب کنید. Gimp، CSS، PNG و غیره را در پالت ذخیره می کند. دارای مبدل رنگ برای تبدیل از یک مدل رنگی به مدل دیگر.
• Paletton ابزاری برای ایجاد ترکیب رنگ است. تفاوتی با Colorscheme ندارد.
• Pictaculous - پالت یک تصویر PNG، JPG یا GIF را تجزیه و تحلیل می کند. یک تصویر را آپلود کنید و مجموعه ای از تمام رنگ های موجود در آن را دریافت کنید.
• Hex Color Tool – ابزار انتخاب رنگ. از لغزنده ها برای تنظیم رنگ استفاده کنید و می توانید روشنایی را انتخاب کنید. سپس رنگ انتخاب شده ذخیره می شود. شما می توانید یک پالت را انتخاب کنید.
• (Un)clrd یک افزونه مرورگر است که تمام رنگ ها را حذف می کند و سایت را سیاه و سفید می کند.
• BrandColors - بزرگترین مجموعه کدهای رنگ برند رسمی. نام برند را انتخاب کرده و نام رنگ های آن از جمله فایل css را دانلود کنید.
• Colortyper - انتخاب رنگ ها از یک زاویه غیر معمول. صفحه نمایش نمادهای چند رنگی را نشان می دهد که همدیگر را قطع می کنند. نتیجه تقاطع یک رنگ جدید است. جالب به نظر می رسد.

الهام بخش

• Dribbble - بزرگترین جامعه طراحان. کار، اجتماع، ارتباطات - می توانید هر چیزی را در اینجا پیدا کنید.
• Freebbble - قالب ها و طرح ها از Dribbble. برخی چیزها را می توان به صورت رایگان دانلود کرد، برخی را می توان خریداری کرد. می‌توانید قالب‌هایی برای CMS، طراحان، نمادها، مدل‌ها، قالب‌های طراحی‌شده وب‌سایت و موارد دیگر پیدا کنید.
• Muzli - الهام از طراحی روزانه. منبعی برای طراحان با نمونه هایی از غیر معمول ترین آثار.
• Awwwards - بهترین پیشرفت های طراحان. به عنوان یک سایت رای گیری جامعه سازماندهی شده است. سایت روز، ماه، سال و غیره تعداد زیادی طرح، فیلم، پیشرفت انتخاب شده است.
• Design You Trust جامعه ای از طراحان است که آخرین روندها، اخبار، نمونه کارها، طرح ها و اعلامیه های خلاقانه را به اشتراک می گذارند.
• ایمیل های واقعا خوب - مجموعه عظیمی از ایمیل های با طراحی خوب. یک قالب را انتخاب کنید و کدهای html، css و js آن را دریافت کنید. می توانید متن، عکس و غیره را تغییر دهید.
• Fubiz – انتشاراتی از حوزه طراحی و خلاقیت. می توانید عکس ها، طرح ها، گرافیک ها، فیلم ها و غیره را پیدا کنید. همه چیز به دسته ها تقسیم می شود.
• Designspiration مجموعه ای از طرح های الهام گرفته از Pinterest است. تعداد زیادی ایده و نمونه - تایپوگرافی، آرم ها، حروف و موارد دیگر.
• Behance مجموعه ای از نمونه کارها از حرفه ای ها است. می توانید جای خالی یا رزومه بگذارید.
• الگوهای موبایل – کتابخانه اسکرین شات های iOS و Android. همه چیز به بخش ها تقسیم می شود. می توانید ایده های زیادی پیدا کنید.
• One Page Love گالری از بهترین طراحی صفحات وب است. می توانید قالب ها و تم ها را خریداری کنید. موارد رایگان نیز وجود دارد.
• Uispace منبعی برای طراحان است. شما می توانید psd، طرح، فونت، ماکت و غیره را به صورت رایگان دانلود کنید.

ویرایشگرهای گرافیکی

• DAZ 3D - مدل سازی سه بعدی. ثبت نام کنید و اپلیکیشن دسکتاپ را دانلود کنید.
• Gimp یک آنالوگ رایگان فتوشاپ است. به شما امکان می‌دهد یک شبکه مدولار را سفارشی کنید، راهنما ایجاد کنید، با لایه‌ها کار کنید، افکت‌ها اضافه کنید و غیره. این یک جایگزین رایگان خوب برای فتوشاپ است. قابل توسعه است - می توانید افزونه های اضافی را دانلود کنید.
• بلندر - مدل سازی سه بعدی، انیمیشن، رندر، صدا، ویدئو. به شما امکان می دهد بازی بسازید. ویرایشگر سریع در حال رشد، بسیار محبوب.
• Aviary یک سرویس ویرایش عکس آنلاین است. گزینه های زیادی از جمله افکت قرمزی چشم، تغییر اندازه و غیره.
• Pixlr یک ویرایشگر عکس آنلاین و یک ویرایشگر گرافیکی جداگانه است. آخرین مورد شبیه فتوشاپ است. روی دیسک ذخیره می کند.
• BeFunky یک سرویس ویرایش عکس آنلاین است. افکت ها، فریم ها، گرافیک ها، روتوش و بسیاری موارد دیگر. یک رابط روسی زبان وجود دارد.
• Inkscape یک ویرایشگر گرافیکی وکتور متن باز کامل است. پشتیبانی از قابلیت های فرمت SVG - کار با اشکال، خطوط، متن، برداری گرافیک های شطرنجی، و غیره. علاوه بر پردازش تصاویر برداری، به شما امکان می دهد یک قالب وب سایت ایجاد کنید و آن را برش دهید - یک شبکه مدولار وجود دارد. به شما امکان می دهد پس زمینه، بنرها، لوگوهای برداری و غیره را ترسیم کنید.
• IconEdit2 یک برنامه بسیار ساده برای رسم آیکون است. دارای فیلتر به شما امکان می دهد یک تصویر را برای اندروید و اپل صادر کنید. می توانید عمق رنگ را تنظیم کنید، آیکون را بچرخانید و تنظیم کنید. از شفافیت، تصاویر متعدد در هر فایل ICO، و ضد aliasing در تمام ابزارهای ترسیم پشتیبانی می کند.
• Falco GIF Animator برنامه ای برای ایجاد انیمیشن فریم به فریم و آیکون های متحرک است. شما می توانید بسیاری از برنامه های مختلف را در منبع دانلود کنید.
• Krita یک ویرایشگر دسکتاپ متن باز حرفه ای است. برای سیستم عامل های مختلف موجود است.
• Boxy-SVG یک ویرایشگر گرافیک برداری شبیه به Adobe Illustrator، Sketch و Inkscape است.
• Photopos یک برنامه چند منظوره است که دارای عملکردهای ویرایشگر عکس، ویرایشگر گرافیکی و برنامه ای برای ایجاد گرافیک کامپیوتری است.
• 5Dfly یک برنامه پردازش دسته ای عکس رایگان است. می تواند با استفاده از پاورپوینت نمایش اسلاید ایجاد کند. شما می توانید مبدل PDF را جداگانه دانلود کنید.
• PaintStar یک ویرایشگر تصویر رایگان است. رابط کاربری بسیار شبیه به Paint است، اما گزینه های بیشتری دارد. برای مثال لایه ها.
• PhotoScape یک ویرایشگر عکس ساده است. دارای عملکردهایی برای تنظیم روشنایی و رنگ، تعادل رنگ سفید، تصحیح نور پس‌زمینه، قاب‌ها، بالون‌ها، حالت موزاییک، افزودن متن، کشیدن تصاویر، برش، فیلترها، حذف قرمزی چشم، رنگ‌سازی، قلم مو، تمبر کلون، براش افکت و غیره است.

سلام به همه امروز، به عنوان بخشی از بخش طراحی وب، می خواهم در مورد فونت هایی صحبت کنم که باید هنگام توسعه یک وب سایت استفاده شود.

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

اما در طراحی وب سایت فقط می توانید از فونت هایی استفاده کنید که در دسترس بازدیدکنندگان بعدی سایت باشد. این کار برای اطمینان از نمایش صحیح صفحات برای همه کاربران با سیستم عامل ها و مرورگرهای مختلف انجام می شود. در غیر این صورت، اگر از فونت‌های غیر استاندارد استفاده می‌کنید، بیشتر بازدیدکنندگان همه چیز را متفاوت و در بیشتر موارد به شیوه‌ای ناخوشایند می‌بینند. به همین دلیل توصیه می شود از فونت های استاندارد ذکر شده در زیر استفاده کنید. لیست فونت ها شامل فونت هایی است که بر روی سیستم عامل ویندوز XP و بالاتر نصب شده اند.

در این مقاله من فونت های دیگر سیستم عامل ها را در نظر نمی گیریم. یک طراح چیدمان با تجربه باید مقایسه فونت ها در سیستم عامل های مختلف را بداند و در حین چیدمان این نکته را در سبک های CSS بنویسد.

اساساً هنگام توسعه بخش محتوایی طراحی، از دو نوع فونت استفاده می شود:

• فونت های سریف
• فونت های sans-serif

فونت های سریف- (سریف انگلیسی - serif) فونت هایی که سبک آنها با سکته مغزی شروع و پایان می یابد. برای مثال Times New Roman.

فونت های بدون سریف(فونت های خرد شده) - (انگلیسی sans-serif - sans serif) فونت هایی با خطوط دقیق و مستقیم بدون سریف. به عنوان مثال Arial.

در زیر می توانید یک اسکرین شات از فونت های serif و sans serif را مشاهده کنید.

فونت برای طراحی وب:

• آریال
• آریال مشکی
• آریال باریک
• کتاب Antiqua
• گوتیک قرن
• کمیک بدون ام اس
• پیک جدید
• فرانکلین گوتیک مدیوم
• گرجستان
• تاثیر
• کنسول لوسیدا
• لوسیدا بدون یونیکد
• Microsoft Sans Serif
• لینوتایپ پالاتینو
• سیلفان
• تاهوما
• تایمز نیو رومن
• تربوشت ام اس
• وردنا
• صفحات وب (نمادها و علائم مختلف)
• بال ها (نمادها و نشانه های مختلف)

همچنین می‌خواهم به این نکته توجه کنم که در تعدادی از فونت‌ها از حروف کج استفاده می‌شود، که خواندن متن را دشوار می‌کند.

از فونت های استاندارد در ویندوز که دارای حروف کج نیستند:

• آریال مشکی
• کمیک بدون ام اس
• فرانکلین گوتیک مدیوم
• تاثیر
• کنسول لوسیدا
• لوسیدا بدون یونیکد
• Microsoft Sans Serif
• سیلفان
• تاهوما

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

راه های زیادی برای یافتن فونت مناسب برای وب سایت شما وجود دارد. برای مثال، می‌توانید از خدماتی با کتابخانه‌های فونت عظیمی که نیاز به اشتراک پولی دارند، استفاده کنید.

اگر بودجه ندارید یا پروژه کوچکی را آزمایش می کنید، می توانید از فونت های وب رایگانی که در دسترس عموم هستند استفاده کنید. پیدا کردن فونت وب مناسب برای وب سایت شما می تواند زمان بر باشد، بنابراین ما مجموعه ای از بهترین آنها را به شما معرفی می کنیم.

1. مونتسرات

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

2. ابریل فتفیس

Abril Fatface بخشی از یک خانواده بزرگ فونت است که در 18 سبک برای اهداف مختلف ایجاد شده است. این فونت ظاهری قوی و ظریف دارد و آن را به یک راه حل عالی برای ایجاد تیترهای چشم نواز تبدیل می کند. اغلب با Lato، Open Sans و Droid Sans ترکیب می شود.

3. نمایشگر Playfair

با توجه به ارتفاع x و زیرنویس کوچک حروف، Playfair Display برای نوشتن عنوان نیز مناسب است، به خصوص اگر فضا محدود باشد. این به خوبی با گرجستان جفت می شود و اغلب با Oswald، Lato و Arvo استفاده می شود.

4. GT Walsheim

GT Walsheim که امروزه در بسیاری از وبلاگ ها استفاده می شود، نماینده سان سریف های هندسی است و بخشی از خانواده Grilli Type است. شما باید برای یک مجموعه کامل از فونت ها هزینه کنید، اما Grilli Type یک آزمایش رایگان از GT Walsheim را ارائه می دهد.

5. Merriweather

اگر خوانایی روی صفحه برای پروژه شما اولویت دارد، Merriweather را که برای این منظور ایجاد شده است، بررسی کنید. علاوه بر این، این فونت به طور مداوم در حال بهبود است.

6. ژوزفین سانس

Josefin Sans از طراحی قدیمی سوئدی الهام گرفته شده است و دارای زیبایی شناسی ظریف و هندسی است.

7. گراویتاس وان

Gravitas One بر اساس «صورت چاق بریتانیا» است، یک فونت تبلیغاتی جسورانه که در طول انقلاب صنعتی در انگلستان ظاهر شد. این فونت در مقیاس متوسط ​​تا بزرگ عالی به نظر می رسد و برای سرفصل ها، عنوان ها و تب ها مناسب است.

8. جورا

حروف این فونت فرم های حرف کایا لی را تکرار می کنند. همچنین حاوی حروف الفبای سیریلیک و یونانی است. در وزن های سبک، معمولی، متوسط ​​و پررنگ موجود است.

9. لیگ گوتیک

League Gothic که در ابتدا توسط موریس فولر بنتون برای شرکت American Type Founders در سال 1903 طراحی شد، با به روز رسانی و اضافه کردن حروف جدید کاربرد جدیدی پیدا کرد.

10. آبدره

Fjord یک قلم سریف است که در اصل برای کتاب های چاپی ایجاد شده است و به ویژه برای جا دادن متن طولانی در قالب چاپ کوچک مناسب است. می توان از آن برای ایجاد حجم زیادی از محتوای متنی در سایت استفاده کرد، زیرا فونت دارای ساختار واضح، سری های برجسته و سر و پاهای بلند و ظریف است.

11. آمارانت

خانواده فونت Amaranth دارای یک طراحی مورب غیر مایل با کنتراست کم و منحنی های قابل توجه است. هر سه سبک آمارانت تقریباً با هر فونت دیگری به خوبی جفت می شوند. می توانید با این فونت بازی کنید - آزمایش کنید و بهترین را انتخاب کنید.

12. پلی

این فونت با کنتراست متوسط ​​در اصل برای زبان بومی Wayuunaiki ایجاد شد که به حروف‌های عریض نیاز دارد. دارای ساقه های کوچک و ارتفاع x بزرگ است که به ویژه در اندازه های کوچک مفید است.

13. جنتیوم بیسیک

این فونت به صورت یک فونت چند زبانه شامل حروف لاتین و یونانی و همچنین سیریلیک و پشتیبانی پیشرفته در نسخه جنتیوم پلاس ایجاد شده است. Gentium Basic و Gentium Book Basic در یک نسخه وب رایگان در دسترس هستند، اما فقط به الفبای لاتین محدود می شوند.

14. Sans را باز کنید

Open Sans نماینده گروتسک های انسانی است. این فونت بسیار خوانا است و با رابط های وب و موبایل سازگار است. این یک فونت غیر مایل با سبک ساده حروف است که با ظاهری خنثی، اما به اندازه کافی دلپذیر مشخص می شود که می توان از آن برای اهداف مختلف استفاده کرد.

15. Ledger Regular

این یک فونت چند منظوره با ارتفاع x بزرگ، کنتراست رنگی قوی و سری‌های کاملاً مشخص است که به خوانایی متن کمک می‌کند. این فونت هم در چاپ و هم در صفحه نمایش با وضوح پایین خوب به نظر می رسد.

16. سیگنیکا

این فونت وب رایگان نماینده sans serif است. کنتراست کم و ارتفاع x زیاد به Signika اجازه می‌دهد تا به خوبی روی صفحه نمایش داده شود. مجموعه گسترده ای از نمادها شامل نمادها، پیکتوگرام ها و فلش ها است.

17. جوزفین اسلب

Josefin Slab که بر اساس قوانین یک فونت هندسی معمولی دهه 1930 ایجاد شده است، با افزودن ویژگی های اسکاندیناویایی، ویژگی های یک فونت اسلب را دارد و یادآور فونت ماشین تحریر است. جالب اینجاست که ارتفاع x آن نصف ارتفاع یک حرف بزرگ است.

18. انجمن

همانطور که از نام آن پیداست، این یک فونت رومی است که برای سرفصل های caps lock خوب است، اما برای نمایش متن نیز مناسب است. تناسبات ظریف این فونت با قوس های نیم دایره ای، قرنیزهای افقی و ستون های عمودی یادآور معماری کلاسیک است.

تیکال سانس که به نام یکی از معروف ترین شهرهای مایاها نامگذاری شده است، دارای ویژگی هایی از گلیف است که در نگارش تمدن آمریکای جنوبی استفاده شده است. خالق آن یک x-height بزرگ را انتخاب کرد که به فونت ظاهری مدرن می بخشد و تأثیر مفیدی بر خوانایی آن دارد و انتخاب زیاد سبک ها امکان استفاده از آن را برای اهداف مختلف می دهد.

20. آروو

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

21. بیوان

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

22. TT استاندارد قدیمی

Old Standard TT بر اساس فونت Modern serif بود که در اواخر قرن 19 و اوایل قرن 20 رایج بود و سپس برای مدت طولانی فراموش شد. این فونت برای افزودن سبک به نوع خاصی از محتوا، مانند تحقیقات علمی یا متون یونانی یا سیریلیک مناسب است.

23. کرئون

این فونت سریف که برای وب‌سایت‌های خبری و وبلاگ‌ها ایده‌آل است، ویژگی‌های فونت اسلب را نیز دارد، اما تعادل و کنتراست کم آن، Kreon را به‌طور قابل‌توجهی شخصی‌تر می‌کند.

24. Droid Sans

Droid Sans برای حداکثر خوانایی حتی در رابط‌های کوچک، مانند منوها روی صفحه‌نمایش تلفن همراه، بهینه شده است. این یک فونت خنثی و غیر مایل با حروف ساده و باز است.

25. ایتالیا

خالق این فونت از خوشنویسی کلاسیک ایتالیایی الهام گرفته است، بنابراین فونت برای پروژه هایی که نیاز به اضافه کردن ظرافت دارید بسیار مفید خواهد بود. ایتالیانا همچنین برای نوشتن سرفصل های خبری به دو صورت چاپی و الکترونیکی مناسب است.

26. ولکورن

این فونت سریف با جزئیات و ویژگی های فراوان بسیار محبوب است. وضوح و استحکام آن اعتماد و انرژی را منتقل می کند و فونت را در اندازه های بزرگتر برای سرفصل ها و عنوان ها و همچنین مقادیر زیادی متن در قالب های کوچکتر مؤثر می کند.

27. بازیگر

این فونت دارای ارتفاع x بزرگ است که به فضای بسیار زیادی نیاز دارد. بازیگر همچنین برای برخی از شخصیت‌ها از سبک قدیمی مانند اعداد 6 و 9 استفاده می‌کند.

با ریشه هایی که به قرن شانزدهم باز می گردد، حروف اومانیستی Garamond به یک نماد تایپوگرافی واقعی تبدیل شده است که اغلب به عنوان پایه ای برای ایجاد حروف مدرن از جمله EB Garamond عمل می کند.

31. اوبونتو

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

32. روزاریو

Rosario یک sans serif کلاسیک انسان گرایانه است که برای سبک سازی پاراگراف های متن عالی است.

33. روبوت اسلب

Roboto Slab یکی از فونت های خانواده Roboto است. نسخه بلوک به خصوص با اشکال هندسی و منحنی های باز چشم نواز است. به همان اندازه برای صفحه نمایش ابزارها و نسخه های چاپ شده متون مناسب است.

34. اسوالد

این فونت نسخه بازسازی شده کلاسیک Alternate Gothic sans serif است. اسوالد اخیراً به‌روزرسانی شده است تا در وزن‌های مختلف، مجموعه شخصیت‌های گسترده‌تر و هسته‌بندی بهتر عرضه شود.

35. بن بست

Stalemate یک فونت دست نویس براق با کمی استعداد قدیمی است. برای ایجاد لهجه و شخصی سازی وب سایت شما مناسب است.

36. متن زرشکی

این فونت متناسب کلاسیک با دقت طراحی شده را می توان هم برای نمایش مقادیر زیادی متن و هم برای نوشتن عنوان استفاده کرد.