چگونه یک فونت زیبا در html بسازیم: اندازه ها، رنگ ها، تگ های فونت html. فونت شما در صفحه Html، فونت را متصل می کند

در پروژه بعدی، من یک بار دیگر سرفصل ها و منوها را با فونت غیر استاندارد می بینم. با عکس بسازید؟ مکش: بی دست و پا، انعطاف ناپذیر، کند. فلاش؟ من نمی توانم او را تحمل کنم. جاوا اسکریپت؟ البته بهترین راه حل در حال حاضر، اما هنوز هم یک عصا است که محدودیت های مرورگرها را به ما یادآوری می کند. زمان آن فرا رسیده است که استانداردها را بررسی کنیم: آنچه آنها ارائه می دهند و در کجا کار می کند.

یادداشت

در مقابل، فونت سفارشی، فونتی است که احتمالاً در بین اکثر بازدیدکنندگان سایت وجود ندارد.

وظیفه

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

راه حل

اما برای IE این کار چندان ساده نیست. اگرچه اولین باری بود که از اجرای فونت های شخص ثالث پشتیبانی کرد (از سال 1997 با انتشار نسخه 4 اینترنت اکسپلورر!!!)، اما به فرمت خاصی برای فونت - EOT (Embedded OpenType) نیاز دارد. فرمت EOT دو مشکل را همزمان حل می کند:

• فایل فونت را فشرده می کند و وزن آن را چندین برابر کوچکتر می کند (با قضاوت با آزمایش همکاران، این روش بهتر از روش های RAR، ZIP و gzip فشرده می شود)
• فایل را رمزگذاری می کند: اطلاعات در فایل فونت جایی که باید استفاده شود نوشته می شود. این فونت خارج از این آدرس کار نخواهد کرد.

در نتیجه، اتصال فونت در سبک ها مانند این هک خواهد بود:

/* فقط برای اینترنت اکسپلورر */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* بیشتر برای همه مرورگرهای دیگر */ @ font-face ( font-family: Scriptorama؛ src: local("Scriptorama")، url(path-to/Scriptorama.ttf)؛ ) [...] h1 ( font-family: Scriptorama، arial؛ font-weight: طبیعی؛

به جای هک، می توانید از .

به روز رسانی 23.08.11یک نحو کامل تر برای جاسازی فونت که برخی از اشکالات احتمالی IE و پشتیبانی بیشتر از مرورگر را در نظر می گیرد:

@font-face ( font-family: "JournalRegular"؛ src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") قالب ("embedded-opentype") فرمت url("journal-webfont.woff") ("woff"), url("journal-webfont.ttf") قالب ("truetype"), url("journal-webfont.svg#JournalRegular") قالب ("svg" ")؛ وزن قلم: معمولی؛ سبک فونت: عادی؛ )

یادداشت

به روز رسانی 10.11.10در اینترنت اکسپلورر ممکن است محلی کار نکند. علاوه بر این، به دلیل آن، فونت ممکن است اصلا متصل نباشد. در پروژه‌هایمان به این نکته توجه می‌کنیم: اگر کار نکرد، آن را برای IE local حذف می‌کنیم.

مزایای:

• انعطاف پذیری - صاحب سایت می تواند هر متنی را که می خواهد تغییر دهد.
• سرعت بارگذاری سریع - حداقل تعداد فایل های خارجی با هر مقدار متن در یک فونت غیر استاندارد.
• حداکثر سرعت سایت - صفر عناصر اضافی در ساختار DOM، صفر اسکریپت ها و اشیاء فلش باعث کاهش سرعت سایت می شوند.
• متن مانند متن رفتار می کند (به هر حال، متن باقی می ماند)، یعنی. متمایز است، به تغییرات رنگ، جسارت، سبک و غیره پاسخ می دهد، سئوی ایده آل.
• اجرای بسیار ساده حتی با در نظر گرفتن بهینه سازی فونت.

ایرادات:

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

اگر توسعه دهندگان فونت سعی کردند همه را راضی کنند، به احتمال زیاد فونت حاوی کاراکترهای بسیار زیادی خواهد بود و بر این اساس، وزن بسیار زیادی دارد. بنابراین فونت Arial Unicode MS حاوی 51 هزار کاراکتر و بیش از 23 مگابایت وزن است! وقت آن رسیده است که به این فکر کنیم که آیا سایت از زبان‌های اودمورت یا فینو اوگریکی استفاده خواهد کرد؟ و همچنین علائم اضافی مختلف، علائم نگارشی و اعداد؟ همچنین باید توجه داشته باشید که هر فونت دارای تعداد مشخصی سبک است: منظم، ایتالیک، پررنگ، نیمه پررنگ. یک فونت می تواند تا 9 نوع پررنگ داشته باشد (مقادیر قابل قبول را به خاطر بسپارید).

چه باید کرد

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

چطور انجام دادن

موارد زیر ممکن است به این امر کمک کند:

سرویس آنلاین @font-face Generator

چه میتوان:

• دو حالت عملیاتی: آسان - برای کسانی که نمی‌خواهند به آن بپردازند و Expert - برای حداکثر بهینه‌سازی
• فرمت های مختلف نتایج و در یک مکان است! آن ها بدون نیاز به فشرده سازی True Type برای همه مرورگرها، و سپس تبدیل جداگانه به EOT برای IE
• گزینه های مختلف برای به دست آوردن نتایج درست به محافظت از فونت در برابر استفاده محلی و فایل برای Cufon!
• انتخاب دقیق کاراکترها برای یک فونت فشرده می توانید زبان و مجموعه ای از کاراکترهای اضافی را مشخص کنید، یا می توانید محدوده کاراکترهای مورد استفاده را مشخص کنید، یا به سادگی کاراکترهای مورد نیاز را فهرست کنید، یا از همزیستی همه روش ها استفاده کنید.
• برای کسانی که در CSS ضعیف هستند، حتی قوانین سبک نیز شکل می گیرد

برای آزمایش، یک فونت 145 کیلوبایتی را با تکلیف آزمایشی «استفاده برای منو» فشرده کردم. فقط حروف کوچک روسی را گذاشتم. اندازه فونت نهایی 8 کیلوبایت بود. حیرت آور!

ایرادات:

• EOT بدون اتصال به یک دامنه خاص تولید می شود (برای پروژه های جدی شما همچنان باید EOT را جداگانه انجام دهید)
• همه فونت های دارای مجوز را نمی توان پردازش کرد (این یک نقطه ضعف نسبی است)

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

بهینه ساز فونت وب

یک سرویس آنلاین که به شما امکان می دهد فقط کاراکترهای لازم را بگذارید. آثار .

مزایا: ساده و واضح. نتیجه یک فونت فشرده True Type، یک فونت EOT برای IE و کد CSS برای اتصال است.

نکته منفی: این سرویس فقط برای لیست کاملاً ثابتی از فونت هایی که آنها در وب سایت خود دارند در دسترس است.

WEFT

نرم افزار مایکروسافت به تبدیل فونت به EOT کمک می کند. Plus استفاده از فونت را در خارج از سایت مشخص شده غیرممکن می کند. در صفحه اختصاصی فیلمنامه می توانید دانلود کنید و با جزئیات بیشتر آشنا شوید.

TTF2EOT

از نام آن مشخص است که یک فونت را از TTF به EOT تبدیل می کند. به صورت محلی از طریق خط فرمان کار می کند که به خودی خود راحت نیست. شما می توانید اسکریپت را دانلود کنید و اطلاعات بیشتر در مورد آن را در وب سایت پروژه بخوانید.

تبدیل فونت آنلاین

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

معایب: ثبت نام الزامی است.

در مورد محافظت از فونت چطور؟

اگر فونت از کیفیت بالایی برخوردار باشد، توسط افراد حرفه ای بالا، اغلب توسط تیمی از متخصصان، اغلب بیش از یک ماه توسعه می یابد. چنین فونتی نمی تواند کمتر از "Zhiguli" از خط مونتاژ هزینه داشته باشد. توسعه دهندگان فونت شروع به ثبت آنها به عنوان علائم تجاری کردند و حقوق صاحب حق چاپ را در مورد فونت در سطح حفاظت از مالکیت صنعتی تضمین کردند.

آن ها برای استفاده از فونت در وب، صاحب سایت باید فونت را با حق استفاده از آن در وب خریداری کند. اما خرید نیمی از مشکل است. فونت همچنین باید از کپی غیرقانونی محافظت شود. اگر فونت مجاز در سایت با تصاویر یا با استفاده از جاوا اسکریپت پیاده سازی شود تقریباً چنین مشکلی وجود ندارد. اما اگر آن را از طریق @font-face پیاده سازی کنید، فونت به طور آشکار روی سرور قرار می گیرد که هر کاربری می تواند آن را دانلود کند. و این در حال حاضر پرونده های قضایی را تهدید می کند.

یادداشت

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

چگونه از یک فونت محافظت کنیم؟

برای اینترنت اکسپلورر، این مشکل بلافاصله حل شد - فرمت EOT فایل را رمزگذاری می کند. در نتیجه، ما یک فونت داریم که فقط در این سایت کار می کند.

سلام دوستان عزیز! در این پست می خواهم در مورد یک نکته مهم در چیدمان بحث کنم اتصال فونت های غیر استاندارد. من معتقدم که هر طراح صفحه‌آرایی باید روش‌هایی برای «مبارزه با فونت‌های غیراستاندارد» بیابد، در غیر این‌صورت پرواز خیالی طراح با فونت‌های استاندارد به پایان می‌رسد. فونت های غیر استاندارد در طرح بندی های PSD همیشه برای من یک مشکل بوده است: استفاده از تصاویر راحت و بی کیفیت نیست. استفاده از اسکریپت هایی مانند cufon واقعاً گزینه مناسبی نیست، برخی از نکات ذکر شده در مستندات برای من کار نمی کند و من اصلاً نمی خواهم با آن زحمت بکشم.

اخیراً با استفاده از قانون css - @font-face شروع به استفاده از گنجاندن فونت های غیر استاندارد مستقیماً از الگو کردم. این روش به ما امکان می دهد در صورتی که فونت بر روی سیستم عامل کاربر نصب نشده باشد، فونت را مستقیماً از قالب سایت بارگیری کنیم.

کد Css به صورت زیر خواهد بود:

@font-face ( font-family: Arbat؛ /* نام فونت برای قوانین CSS */ src: local("Arbat")، /* وجود فونت را در سیستم عامل کاربر */ url(fonts/Arbat) بررسی کنید. ttf / * اگر فونت توسط مرورگر پیدا نشد، آن را در مسیر مشخص شده دانلود کنید */ ) [...] h1 ( font-family: Arbat; /* این نام فونت را می توان به عناصر لازم مشخص کرد. */)

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

در اینجا یک لیست تقریبی از فرمت های پشتیبانی شده توسط مرورگرها آمده است:

این فراوانی فرمت ها به دلیل حداکثر پشتیبانی از همه مرورگرها است. در این حالت، مرورگر اولین فونتی را که می‌فهمد از لیست دانلود می‌کند (به شرطی که فرمت صحیح مشخص شده باشد). فرمت ها به ترتیب افزایش وزن توضیح داده شده اند. اما، با وجود این واقعیت که فرمت "WOF"ساده ترین، در وهله اول - "EOT". این برای جلوگیری از نمایش نادرست در IE 6-8 ضروری است.

آیا باید فرمت را مشخص کنم؟

اعلام "قالب"ضروری است تا مرورگر بتواند فورا قالب مورد نیاز خود را تعیین کند. آن ها هنگام بارگذاری، فقط قالب مورد نیاز و درک آن را از لیست انتخاب می کند. اگر فرمت را مشخص نکنید چه اتفاقی می افتد؟ اگر فرمت مشخصی ندارید، اما بیش از یک فرمت متصل است، مرورگر شروع به بارگیری همه آنها و مرتب کردن قالب مورد نظر در جستجو می کند. نتیجه این است که هنگام اتصال بیش از یک فرمت فونت، اعلامیه را مشخص کنید "قالب"لزوما! فراموش نکنید که پردازش کمی زمان می برد، اما در اینجا می توانیم برنده شویم.

برای فعال کردن همه فرمت ها، کد CSS ما به شکل زیر خواهد بود:

@font-face ( font-family: "Arbat"; src: url("fonts/Arbat.eot"); /* برای پشتیبانی از مرورگر IE6+ */ src: فرمت url("fonts/Arbat.eot?#iefix") ("embedded-opentype")، /* هک برای نمایش صحیح فونت ها در IE8 */ url("fonts/Arbat.woff") فرمت("woff")، /* برای مرورگرهای مدرن */ url("fonts/Arbat". ttf ") قالب ("truetype"), url ("fonts/Arbat.svg#arbat") قالب ("svg")؛ وزن فونت: معمولی؛ سبک فونت: عادی؛ ) [...] h1 ( فونت - خانواده: Arbat /* این نام فونت را می توان برای عناصر مورد نظر تعیین کرد */ )

بنابراین، نتیجه می شود که، در این مورد، در دایرکتوری " فونت ها"تمام فرمت های فوق یک فونت باید ذخیره شوند. و اگر فقط قالب در سیستم عامل ما نصب شده باشد از کجا می توانیم آنها را دریافت کنیم - TTF? برای انجام این کار، ما از یک سرویس ویژه تبدیل فرمت فونت استفاده خواهیم کرد - http://fontface.codeandmore.com. تنها کاری که باید انجام دهید این است که فونت مورد نیاز را از سیستم عامل ما دانلود کنید، روی دکمه قرمز بزرگ «I want my font-face kit» کلیک کنید. "و این سرویس در عرض چند ثانیه بسته ای از فونت ها را در قالب های مورد نیاز برای ما تولید می کند.

توجه! این سرویس اکنون پرداخت می شود. این سرویس اکنون با اشتراک در دسترس است، اگرچه قیمت نمادین است - 1 ماه. - 3 دلار

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

این بایگانی را در هر فهرستی از قالب خود باز کنید، به عنوان مثال، یک پوشه - فونت ایجاد کنید. یک فایل با پسوند html را در هر ویرایشگر متنی باز کنید (در مورد من فایل arbat.html است) و قوانین چهره فونت را از آنجا کپی کنید و آنها را در فایل سبک خود قرار دهید (فقط بدون "»).

این کد من است:

@font-face ( font-family: "Arbat"؛ src: url("arbat.eot"); src: url("arbat.eot?#iefix") format("embedded-opentype"), url("arbat" قالب -سبک: عادی)

مهم!مسیرهای فایل های فونت را به مسیرهای صحیح تغییر دهید وگرنه هیچ کاری درست نمی شود!

H1 (font-family: Arbat; ) /* به عنوان مثال، عنوان سطح اول را انتخاب کردم */

خدمات بیشتر Font-Face

به عنوان یک جایگزین، من همچنین می‌توانم خدمات مولد چهره فونت رایگان را پیشنهاد کنم:

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

در پایان می خواهم به تمام مزایا و معایب این روش اشاره کنم.

مزایای:

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

ایرادات:

• این روش توسط همه مرورگرها پشتیبانی نمی شود، حتی اگر ما از فرمت های مختلف استفاده کنیم. فراموش نکنید که هر مرورگر می تواند نسخه های زیادی داشته باشد.
• برخی از فایل های فونت می توانند بسیار سنگین و چندین مگابایت وزن داشته باشند (اگرچه می توان این مشکل را حل کرد) و این می تواند به طور قابل توجهی بر سرعت بارگذاری صفحه تأثیر بگذارد.
• در حالی که فونت در حال بارگیری است، کاربر، هرچند برای یک لحظه، هنوز فونت استاندارد را می بیند (در اینجا بستگی به اندازه فونت دارد).
• گاهی اوقات ممکن است اشکالات جزئی ظاهر شوند - هنگام نگه داشتن ماوس، رنگ مخدوش می شود (Safari، Chrome، Opera).
• فونت ممکن است دارای حق چاپ باشد و در این صورت سرقت آن آسان خواهد بود.

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

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

بسیاری از طراحانی که طرح‌بندی‌های جدی و جالبی ایجاد می‌کنند، تعداد زیادی فونت منحصر به فرد و زیبا در دسترس دارند. به لطف چنین فونت هایی، طراحی جذابیت و انحصار خود را به دست می آورد. اما فونت های غیر استاندارد فقط روی کامپیوتری که از قبل روی آن نصب شده اند نمایش داده می شوند، بنابراین برای اینکه به درستی با آنها کار کنید، طراح باید تمام فونت هایی را که در چیدمان استفاده می کند در اختیار شما قرار دهد. زیرا هنگام چیدمان چیدمان، باید این فونت ها را روی کامپیوتر خود نصب کنید. اما کاربر سایت شما همه فونت ها را دانلود نمی کند و آنها را روی رایانه خود نصب نمی کند، بنابراین باید مرورگر را وادار کنید که فونت های لازم را خودش بکشد. این قانون در اینجا کمک خواهد کرد، همچنین گزینه‌هایی برای استفاده از Cufon یا بارگیری فونت‌ها از Google Webfonts یا Fontsquirrel وجود دارد، اما Google Webfonts و Fontsquirrel ممکن است فونت مورد نیاز نداشته باشند، بنابراین بیایید بهترین گزینه را در نظر بگیریم - اتصال فونت‌های منحصر به فرد با استفاده از font-face@.

ساده ترین راه برای اتصال فونت نوشتن آن در شیوه نامه است:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body(font-family: "PF Din CompPro"، Arial، sans-serif ;)

در اینجا 'PF Din CompPro' نام فونت است و سپس می توانید این فونت را برای عناصر ضروری سایت مشخص کنید و fonts/pfdintextcomppro-medium-webfont.ttf مسیر فونت شما است که در فونت ها وجود دارد. پوشه، مهم است که در نام هیچ فاصله ای در فایل فونت وجود نداشته باشد، بهتر است آنها را با یک خط تیره جایگزین کنید.

این ساده ترین راه است، اما در همه مرورگرها کار نمی کند و این یک مشکل بزرگ است.

هر مرورگر از فرمت های فونت خود پشتیبانی می کند:
TrueTypeفونت برای فایرفاکس 3.5 و بالاتر، اپرا 10 و بالاتر، سافاری 3.1 و بالاتر، کروم 4.0.249.4 و بالاتر
EOTفونت برای اینترنت اکسپلورر 4+
WOFFفونت برای فایرفاکس 3.6 و بالاتر، اینترنت اکسپلورر 9 و بالاتر، کروم 5 و بالاتر
SVGفونت برای iPad و iPhone

بنابراین، از یکی از فونت های خود با فرمت ttf، باید چندین فونت مشابه را فقط با فرمت متفاوت بسازید. این جایی است که مولد فونت در fontsquirrel.com می تواند کمک کند. در این صفحه فونت خود را دانلود کنید، تنظیمات بهینه را انتخاب کنید، کادر تأیید قانونی بودن فونت دانلود شده را علامت بزنید (برخی از فونت ها هزینه زیادی دارند و برای استفاده از آنها باید مجوز داشته باشید)، سپس روی دکمه «دانلود کیت» کلیک کنید. و آرشیو مورد نظر را با تمام فرمت های فونت خود دریافت خواهید کرد.

از آرشیو، تمام فرمت های فونت های خود را دانلود کنید، در تئوری اینها 4 فایل با پسوندهای .eot، .svg، .ttf و .woff هستند، این فایل ها را در پوشه فونت های وب سایت خود کپی کنید، آرشیو نیز حاوی فایل stylesheet.css - شامل تمام قوانین اتصال فونت ها قبلاً نوشته شده است، می توانید با خیال راحت آنها را در شیوه نامه خود کپی کنید، فقط فراموش نکنید که مسیرهای خود را به فایل های فونت، به عنوان مثال، به پوشه فونت ها نشان دهید. . نمونه ای از اتفاقی که در یکی از سایت های من افتاد:

@font-face ( font-family: "PF Din CompPro"؛ src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") قالب("truetype" ) url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg": normal font-style: normal; Arial، Tahoma، Verdana، sans-serif)

با این پارامترها، فونت ها در هر مرورگری، از جمله IE-7-8-9 مورد علاقه همه، نمایش داده می شوند.

اگر از فونت های غیر استاندارد برای الفبای سیریلیک، یعنی برای حروف روسی استفاده می کنید، و فونت به درستی در سایت نمایش داده نمی شود، ایجاد فونت با تنظیمات پیشرفته ممکن است کمک کند، صفحه http://www.fontsquirrel.com را دانلود کنید. /tools/webfont فونت خود را ایجاد کنید و تنظیمات "Expert" را انتخاب کنید. تنظیمات زیادی در آنجا وجود دارد، من همه چیز را نمی دانم، اما با دقت بخوانید و موارد مورد نیاز خود را انتخاب کنید و برای پشتیبانی از الفبای سیریلیک، در بلوک Subsetting: بخش Custom Subsetting... را انتخاب کنید و کادر سیریلیک را علامت بزنید. و همچنین زبان ها و فرمت های مورد نیاز خود را بررسی کنید.

در اینجا یک نمونه از آنچه من به دست آوردم آمده است:

فونت ها نقش مهمی در طراحی سایت دارند. متن مشابهی که با فونت‌های مختلف نوشته شده است می‌تواند تأثیری کاملاً متضاد در شخص ایجاد کند.

خودت ببین:

برخی از فونت ها قانع کننده تر به نظر می رسند، برخی دیگر جذاب تر هستند.

اما چگونه می توان هر فونتی را به سایت متصل کرد و در هر کجا که می خواهید از آنها استفاده کنید؟

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

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

یاد خواهید گرفت:

روش شماره 1. اتصال سریع فونت ها به سایت وردپرس (مشکل: ⭐ ⭐ ⭐)

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

مثلا:

شما می خواهید فونت عنوان مقاله خود را تغییر دهید. برای این:

1. در پنل مدیریت، به قسمت گزینه های تم بروید. بسته به الگوی شما، این بخش ممکن است کمی متفاوت خوانده شود، اما معنی همیشه یکسان است - "تنظیمات تم".

2. به قسمت تایپوگرافی بروید.

3. عنصری را که می خواهید فونت آن را تغییر دهید (عناوین، پاراگراف ها) انتخاب کنید:

اگر سایت شما با موتور دیگری اجرا می شود یا تم شما چنین تنظیماتی را ارائه نمی دهد، به روش بعدی بروید.

روش شماره 2. از قدرت فونت های گوگل استفاده کنید
(مشکل: ⭐ ⭐ ⭐ ⭐)

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

مرحله 1. به وب سایت رسمی سرویس بروید.

مرحله 2. مواردی را که برای شما مناسب است را در مجموعه فونت Google پیدا کنید. در منوی سمت راست می توانید با تعیین زبان، سبک و محبوبیت فونت دایره را محدود کنید:

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

مرحله 3. بیایید تصور کنیم که فونت Roboto را دوست دارید. روی نماد "+" کلیک کنید:

با کلیک بر روی نماد "+" می توانید هر قلمی را اضافه کنید.

مرحله 4. پس از این، باید سبد خرید را با فونت های انتخاب شده گسترش دهید:

با رفتن به تب Customize می توانید سبک و زبان را انتخاب کنید. در مورد سبک ها، من به شما توصیه می کنم یک مجموعه استاندارد را انتخاب کنید - معمولی (400)، ایتالیک (400 ایتالیک)، پررنگ (700) و ایتالیک-پررنگ (پررنگ 700 ایتالیک):

اما اگر فقط به سبک پررنگ (برای سرفصل ها) نیاز دارید، فقط این را انتخاب کنید.

به یاد داشته باشید، هر چه سبک های بیشتری را انتخاب کنید، فایل دانلود شده سنگین تر خواهد بود.

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

مرحله 5. به بخش Embed برگردید و تب @IMPORT را انتخاب کنید. سپس خط کد حاوی "@import" را کپی کنید و آن را در خط اول فایل CSS سایت خود قرار دهید:

اگر سایت وردپرسی دارید، فایل CSS به احتمال زیاد در اینجا قرار دارد: wp_content/themes/"Yourtheme"/css/...به احتمال زیاد یک فایل فونت در پوشه CSS وجود خواهد داشت که باید کد جاسازی شده را از Google منتقل کنید:

مهم نیست که سایت شما بر روی چه CMS اجرا می شود، فقط کد را قرار دهید و همه چیز انجام می شود 👌

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

شما می توانید فونت را برای عناصر خاص وب سایت در همان فایل CSS تعریف کنید.

مثلا:

برای دادن فونت Roboto به تمام پاراگراف ها، موارد زیر را می نویسم: p (font-family: Roboto;)

روش شماره 3. اتصال فونت سفارشی با استفاده از CSS (مشکل: ⭐ ⭐ ⭐ ⭐ ⭐)

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

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

آیا می دانستید که برای استفاده از فونت های وب نیاز به خرید مجوز ویژه دارید؟

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

مرحله 1. به وب سایت رسمی سرویس بروید

مرحله 2. در منوی سمت راست، در بخش Languages، Cyrillic را انتخاب کنید.

مرحله 3. یک فونت مناسب پیدا کنید. به تعداد سبک ها توجه کنید.

به عنوان مثال، اگر 4 سبک وجود داشته باشد، 4 سبک نوشته می شود:

تعیین سبک های فونت - معمولی (400/معمول)، ایتالیک (مورب)، پررنگ (700/بولد)، مورب پررنگ (700 ایتالیک).

مرحله 5. روی نام فونت کلیک کنید و به صفحه تنظیمات بروید.

مرحله 6. به بخش Webfont Kit بروید. تمام فرمت های فونت را انتخاب کنید و روی Download @FONT-FACE KIT کلیک کنید. اگر فقط 1-2 فرمت موجود باشد، مشکلی نیست.

برای اتصال فونت ها از @Font-face استفاده می کنیم

از طریق دستور font-face@ می توانید یک یا چند فونت را به سایت خود متصل کنید. اما این روش مزایا و معایب خود را دارد.

طرفداران:

• از طریق CSS می توانید فونت ها را با هر فرمتی متصل کنید: ttf، otf، woff، svg.
• فایل های فونت در سرور شما قرار خواهند گرفت - شما به خدمات شخص ثالث وابسته نخواهید بود.

معایب:

• برای اتصال صحیح یک فونت، باید برای هر سبک یک کد جداگانه بنویسید.
• بدون دانستن CSS می توانید به راحتی گیج شوید.

شما به سادگی می توانید کد تمام شده من و جایی که باید مقادیر خود را مشخص کنید کپی کنید.

مرحله 1. فایل های فونت دانلود شده را به وب سایت خود منتقل کنید. این کار را می توان از طریق کنترل پنل هاست یا از طریق FTP انجام داد.

پیشنهاد می‌کنم یک پوشه فونت‌ها را در همان فهرستی که فایل CSS خود دارید ایجاد کنید. تمام فایل های فونت را به این پوشه منتقل کنید.

مرحله 2. ورودی زیر را در همان ابتدای فایل CSS بنویسید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont.eot");
src: فرمت url("../fonts/WebFont.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont.woff") ("woff"),
فرمت url("../fonts/WebFont.ttf") ("truetype"),
url("../fonts/WebFont.svg#webfont") قالب ("svg");
فونت-وزن: عادی;
سبک فونت: عادی.
}

جایی که MyWebFont نام فونت است و مقدار خاصیت src (داده‌های داخل پرانتز در گیومه) مکان آنها (پیوندهای نسبی) است. باید هر سبک را جداگانه مشخص کنیم.

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

مرحله 3. هنگام اضافه کردن حروف کج، موارد زیر را بنویسید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Italic.eot");
src: فرمت url("../fonts/WebFont-Italic.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Italic.woff") ("woff"),
فرمت url("../fonts/WebFont-Italic.ttf") ("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") قالب ("svg");
فونت-وزن: عادی;
سبک فونت: مورب;
}

در جایی که همه چیز یکسان است، فقط ما به ویژگی font-style مقدار italic را دادیم.

مرحله 4. برای فعال کردن استایل پررنگ، کد زیر را اضافه کنید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Bold.eot");
src: فرمت url("../fonts/WebFont-Bold.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Bold.woff") ("woff"),
فرمت url("../fonts/WebFont-Bold.ttf") ("truetype"),
فرمت url("../fonts/WebFont-Bold.svg#webfont") ("svg");
font-weight:bold;
سبک فونت: عادی.
}

جایی که ویژگی font-weight را روی Bold قرار می دهیم.

فراموش نکنید که محل صحیح فایل های فونت را برای هر سبک مشخص کنید.

مرحله 5. برای افزودن استایل ایتالیک پررنگ، موارد زیر را وارد کنید:

@font-face(
font-family: "MyWebFont"؛
src: url("../fonts/WebFont-Italic-Bold.eot");
src: فرمت url("../fonts/WebFont-Italic-Bold.eot?iefix") ("eot")،
فرمت url("../fonts/WebFont-Italic-Bold.woff") ("woff"),
فرمت url("../fonts/WebFont-Italic-Bold.ttf") ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") قالب ("svg");
font-weight:bold;
سبک فونت: مورب;
}

خوب، این همه :) شما به تازگی 4 سبک فونت به وب سایت خود اضافه کرده اید.

اما یک نکته وجود دارد - این اتصال فونت ها به درستی در مرورگر اینترنت اکسپلورر 8 نمایش داده نمی شود.

نحوه اتصال فونت برای سایت ها در CMS های مختلف

مهم نیست که سایت شما روی چه موتوری است (وردپرس، جوملا، دروپال، اپن کارت) - اگر به فایل CSS دسترسی دارید، می‌توانید فونت‌ها را از طریق فونت‌های گوگل یا با آپلود آنها به سرور خود از طریق Fontsquirrel متصل کنید.

باشه الان تموم شد اگر فکر می کنید این مقاله می تواند برای سایر وب مسترها مفید باشد، آن را در شبکه های اجتماعی به اشتراک بگذارید.

و:

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

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

زمانی که لازم باشد

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

• منوی شیک.
• سربرگ های شیک.
• لوگو.ایجاد لوگو امری جدی است، کتاب های زیادی در این زمینه نوشته شده است، متخصصان مدت هاست در حال بررسی این موضوع بوده اند... و نویسنده نان مردم را نمی گیرد، بلکه دو سنت خود را می گذارد. اگر لوگوی شما متنی است، برای بهینه سازی سئو با کیفیت بالا باید به صورت TEXT نمایش داده شود.

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

راه حل ها

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

• تصویر هیچ انعطاف پذیری پیکربندی وجود ندارد، سرعت بارگذاری صفحه بدتر می شود، بار سرور افزایش می یابد، سئو کاملاً منتفی است.
• فلاش. فایل های اضافی برای دانلود، به مهارت در ویرایشگرهای فلش نیاز دارید (همچنین می توانید پارامترهای متن را در اینجا تغییر دهید)، سئوی متوسط.
• JS. فایل های خارجی اضافی (و هر چیزی که همراه آن است)، سئوی متوسط، متن قابل کپی نیست.
• فونت های سفارشی با استفاده از CSS

راه واقعی سامورایی ها یا "زنده باد CSS"

قانون css @font-face به ما در حل این مشکل کمک می کند، که به ما امکان می دهد فونت های خاصی را در سند بارگذاری کنیم و تنظیمات آنها را تعریف کنیم.

@ font- face ( خانواده فونت: AlexBrush- Regular; src: local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf ") ;)

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

این نوع طراحی به شما امکان می دهد فونت های TrueType (ttf) و OpenType (otf) را متصل کنید.

جالب هست: OpenType نسبت به TrueType قابلیت های پیش از چاپ بیشتری دارد و از مجموعه بزرگتری از کاراکترها در اندازه فایل کوچکتر پشتیبانی می کند.

به نظر می رسد که این موضوع می تواند بسته شود، اما یک موضوع وجود دارد اما ... بیایید دوستان "ویژه" خود، یعنی مرورگرهای خانواده IE را به یاد بیاوریم. برای پیاده سازی یک فونت سفارشی در IE، فونت باید در قالب Embedded OpenType (eot) باشد.

این تنها موردی نیست که یک ویژگی اینترنت اکسپلورر بیشتر از ضرر مفید است. واقعیت این است که فرمت eot به این معنی است:

• رمزگذاری اطلاعات مربوط به آدرس پروژه در فایل وارد می شود، بنابراین مهاجمان نمی توانند فونت را بدزدند و آن را در وب سایت خود آپلود کنند.
• فشرده سازی. فایل فونت فشرده شده و در نتیجه زمان دانلود کاهش می یابد.

با در نظر گرفتن موارد فوق، بیایید مثال خود را اصلاح کنیم:

@ font- face ( font-family: AlexBrush- Regular; src: local("AlexBrush- Regular" ) , url(./ AlexBrush- Regular. eot) ;) @ font- face ( font-family: AlexBrush- Regular; src : local("AlexBrush-Regular" ), url("./AlexBrush-Regular. otf " );

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

@font-face ( font-family: "AlexBrush-Regular" ; src: url("AlexBrush-Regular.eot") ; src: url( "AlexBrush-Regular.eot?#iefix") format("Embedded-opentype" ) , url( "AlexBrush-Regular.svg#JournalRegular") قالب ("svg" ); فرمت url("AlexBrush-Regular.woff") ("woff") , url("AlexBrush-Regular.otf") قالب("truetype") , )

مهم!!!

1. انعطاف پذیری. تنظیم و تغییر تنظیمات متن آسان است.
2. سرعت. حداقل تعداد فایل های اضافی برای بارگیری، سرعت صفحه را مانند همان تعداد عناصر در js و فلش کند نمی کند.
3. سئو. متن متن باقی می ماند - مزایای آن آشکار است.
4. این مثال در مرورگرهایی کار می کند که از IE4، Op، Fx3.5، Cr2، Sa1 شروع می شود.
5. قبل از استفاده از یک فونت، باید آن را بهینه کنید (بعد از آن را بخوانید).
6. هنگام استفاده از فونت های خریداری شده، باید نگران ایمنی آنها باشید.
7. اگر پهنای باند کانال ارتباطی کم باشد، تا زمانی که فایل فونت بارگذاری نشود، کاربر یا یک فونت ساده را به جای یک فونت غیر استاندارد می بیند یا اصلا چیزی نمی بیند.

پس گفتار

بهینه سازی فونت

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

در نتیجه چنین تلاش هایی، فایل های فونت می توانند بیش از ده ها مگابایت علامت باشند. آیا ما به چنین تنوعی نیاز داریم؟ از این گذشته، برای دادن یک لمس سبک تند، ما (بسته به موقعیت) لزوماً به علائم نقطه گذاری یا نمادهای مختلف نیاز نداریم. در حقیقت، سبک های مختلف همیشه ضروری نیستند. یا فرض کنید که وب سایت خود را صرفاً برای RuNet بهینه کرده اید، می توانید بدون لاتین ...

خوب، شما در حال حاضر به اصل مطلب پی برده اید. فونت باید بهینه شود:

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

چگونه انجامش بدهیم؟ تعدادی سرویس در اینترنت وجود دارد که به شما امکان می دهد عملیات لازم را انجام دهید، به عنوان مثال: font-face Generator، Online Font Converter، Web Font Optimizer و غیره.

حفاظت

ایجاد یک فونت کاربردی با کیفیت بالا زمان زیادی می برد و بنابراین چنین فونتی هزینه زیادی دارد. تمام فونت های خریداری شده (قانونی) ثبت شده و دارایی معنوی هستند.

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

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

البته پیشرفت های جدیدی وجود دارد - به عنوان مثال، فرمت WOFT، که در آن موضوع حفاظت به طور مشابه eot حذف می شود، اما متأسفانه، هنوز نمی تواند از پشتیبانی کامل در مرورگرها ببالد.

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