استفاده از فونت‌های سفارشی در طراحی سایت و سرعت سایت
استفاده از فونت‌های سفارشی با استفاده از قانون @font-face بسیار متداول است. تقریبا می‌توان گفت در طراحی سایت‌های جدید دیگر نمی‌توان به فونت‌های پیش‌فرض مرورگرها اطمینان داشت.
با وجود اینکه این کار باعث بهبود شکل ظاهری سایت و بهبود تجربه کاربری می‌شود، ولی معایبی نیز به همراه دارد:
- باعث افزایش حجم صفحات وب می‌شود
- باعث افزایش تعداد درخواست‌ها توسط مرورگر می‌شود
- باعث تاخیر در نمایش اطلاعات به کاربر می‌شود
دو اشکال اول ممکن است تا حدودی با کاهش تعداد فونت‌های سفارشی و فشرده‌سازی بهینه‌ی آن‌ها قابل حل باشد ولی مشکل سوم که شاید از دو مشکل قبلی مهم‌تر هم باشد، نیاز به راه حل دیگری دارد.
تاخیر نمایش اطلاعات به چه معناست ؟
مرورگرها معمولا حتی اگر فونت‌های جانشین هم برای سایت تعریف کنید، حدود ۳ ثانیه منتظر می‌مانند تا فونت اصلی دانلود و استفاده شود. تنها اگر در مدت ۳ ثانیه فونت بارگزاری نشود، از فونت جایگزین استفاده میکنند.
فونت جایگزین به صورت زیر تعریف می‌شود:
|
1 |
font: 10pt/2 Example, sans-serif; |
در قطعه کد بالا فونت اصلی Example و فونت جایگزین sans-serif است که یک خانواده فونت و قابل تفسیر توسط مرورگرهای مختلف است.
این تاخیر ۳ ثانیه‌ای باعث می‌شود کاربرانی که سایت شما را باز میکنند، در این مدت نتوانند متن‌های موجود در صفحه را مشاهده کنند. گوگل نیز در آخرین به‌روزرسانی‌ها، این تاخیر را محاسبه می‌کند و آن را در سئو سایت شما در نظر می‌گیرد.
راه حل تاخیر نمایش محتوا چیست ؟
برای حل این مشکل در هنگام تعریف فونت می‌توانیم مشخص کنیم که این فونت چه مقدار ضروری است. برای مثال ممکن است یک فونت برای متن‌های معمولی سایت استفاده شده باشد و فونتی دیگر برای عنوان‌ها و متن‌های موجود در اسلایدر سایت و یک فونت آیکون برای نمایش تصویر شبکه‌های اجتماعی.
بسته به اینکه نمایش متن به کاربر مهم‌تر است یا شکل گرافیکی حروف فونت، گزینه‌های مختلفی با استفاده از دستور font-display قابل تعریف است:
|
1 2 3 4 5 |
@font-face { font-family: 'Example'; font-display: auto; src: local('Example'), url( ... ) format( 'woff2' ); } |
همان طور که مشاهده می‌کنید، حالت پیش‌فرض این دستور auto است که تصمیم‌گیری برای استفاده از فونت جایگزین را به مرورگر می‌دهد.
گزینه‌های موجود برای font-display:
|
1 2 3 4 5 |
font-display: auto; font-display: block; font-display: swap; font-display: fallback; font-display: optional; |
- در حالت block که معمولا معادل auto است، مرورگر حدود ۳ ثانیه متنظر می‌ماند و اگر فونت اصلی بارگزاری نشود، از فونت جایگزین استفاده می‌کند. سپس هر زمان که فونت اصلی بارگزاری شد آن را جایگزین می‌کند.
- در حالت swap زمان نمایش فونت جایگزین بسیار کوتاه‌تر از ۳ ثانیه خواهد بود. فونت اصلی هر زمان که در دسترس باشد، جایگزین می‌شود.
- در حالت fallback فونت اصلی ممکن است هیچ وقت بارگزاری نشود. این گزینه هنگامی که اهمیت فونت کم باشد استفاده می‌شود و مرورگر ممکن است به دلایل مختلف از جمله کندی سرعت اینترنت، از بارگزاری فونت اصلی چشم‌پوشی کند.
- در حالت optional اهمیت فونت در کمترین مقدار خود قرار دارد و احتمال اینکه به دلایل مختلف فونت در بیشتر مواقع توسط مرورگر بارگزاری نشود وجود دارد.
پشتیبانی در مرورگرهای مختلف
این ویژگی در مرورگرهای مدرن مثل فایرفاکس و کروم پشتیبانی می‌شود. در حال حاضر مرورگرهای Edge و IE از font-display پشتیبانی نمی‌کنند. البته تا زمان نهایی شدن این قانون در نگارش چهارم CSS پشتیبانی از آن توسعه بیشتری خواهد یافت.
با توجه به اینکه عدم پشتیبانی از این ویژگی مشکل مهمی به شمار نمی‌رود، می‌توانید بدون نگرانی از آن استفاده کنید.
چند توصیه و نکته
- در هنگام استفاده از فونت‌های سفارشی، بهتر است از گزینه Local هم استفاده کنید تا اگر کاربر قبلا آن فونت را روی سیستم خود نصب شده دارد، فونت مجددا دانلود نشود.
- تنظیمات Cache مربوط به فونت‌ها را به درستی انجام دهید تا دفعات دانلود فونت از سرور شما به حداقل برسد.
- تا جایی که ممکن است از فونت‌های موجود در CDNهای عمومی استفاده کنید، تا احتمال موجود بودن فونت روی سیستم کاربران به حداکثر برسد.
- تعداد فونت‌های موجود در صفحات را به حداقل مورد نیاز برسانید و آن‌ها را به خوبی فشرده کنید.
- فونت‌هایی که در دید اول سایت استفاده شده‌اند را طوری انتخاب و تنظیم نمایید که هنگام باز شدن سایت، کاربران هر چه زودتر متن‌ها را مشاهده کنند.
- برای فونت‌های آیکون از گزینه font-display: block استفاده کنید تا مطمئن شوید که مرورگر بیشترین تلاش را برای بارگزاری فونت به کار می‌گیرد.
منبع:
سلام
من از فونت BYekan استفاده میکنم میشه لطفا کد صحیحش همراه با BYekan رو قرار بدید.
با تشکر
با سلام
جهت دانلود فونت یکان اصلاح شده برای وب، اینجا کلیک کنید.
سلام
میشه در مورد اینکه چطوری فونت ها رو Local کرد هم توضیح بدید؟
در مورد تاثیر گزاری فونت ها بر cls یه توضیحی می فرمایید؟
با سلام
فونت Local در اختیار شما نیست. صرفا به مرورگر می‌گویید که اگر کاربری فونت مورد نظر را روی سیستم نصب داشت، از همان استفاده کن و دانلود نکن
در مورد CLS، اگر فونت جایگزین ابعاد متفاوتی با فونت اصلی داشته باشد، پس از تغییر فونت، صفحه پرش خواهد داشت که CLS را افزایش می‌دهد.
سلام خسته نباشید .چرا برای ایکون ها باید روی بلاک تنظیم کنیم اینجوری که زمان میبره باز
با سلام
اگر برای آیکون‌ها تنظیمات لازم را انجام ندهید، فونت پیش‌فرض ممکن است حروف و علامت‌های نامربوط را به جای آیکون‌های مورد نظر شما نمایش بدهد و این چیزی نیست که معمولا بخواهیم اتفاق بیفتد
همیشه باید بتوانیم تعادل منطقی را به وجود بیاوریم. سرعت یکی از عوامل است و همه چیز نیست
سلام خسته نباشید ممنون از مقاله خوبتون ,من چندتا سوال از خدمتتون داشتم یک این که فونت های serif,Helvetica,monospace,sans-serif ایا هم از فارسی و هم از انگلیسی پشتیبانی میکنند . سوال دوم اینکه ایا باید این فونت ها رو دانلود کنیم و داخل هاست اپلود کنیم یا این که خود مرورگر این فونت ها رو دارند .سوال سومم اینکه من یک قالب دارم می خوام سرعتش رو زیاد کنم فونت اصلی قالب من فونت وزیر هستش که هم از فارسی و هم از انگلیسی پشتیبانی میکنه و داخل css قالبم از فونت sans-serif وچندتافونت دیگه که توی سوال اولم نوشتم به صورت مستقیم استفاده کرده به طور مثال:
font-family: 'sans-serif';
حالا سوال من اینکه به جای font-family بالایی نمیشد این طوری نوشت:
font-family:'vazir' ,'sans-serif';
تا با این کار هم سرعت حفظ بشه چون فقط یک فونت لود بشه وهم اگر فوت اولی لود نشد از فونت دومی استفاده بشه.
با سلام
این فونت‌ها ممکن است روی برخی سیستم‌ها موجود باشند و روی برخی دیگر خیر. حروف فارسی روی همه‌ی فونت‌ها موجود نیست. مرورگر همچنین ممکن است بسته به شرایط برای یک خانواده‌ی فونت، انتخاب متفاوتی داشته باشد. اگر فونت شما گزینه‌ای است که روی سیستم‌عامل‌های مختلف موجود نیست، باید آن را آپلود کنید تا سایت همیشه یکسان دیده شود.
معمولا موقع تعریف CSS چند فونت مشخص و چند خانواده‌ی فونت تعریف میکنند تا در شرایط مختلف به ترتیب بهترین گزینه توسط مرورگر انتخاب شود.
اگر هر فونت موجود نباشد یا حروف مربوط به یک زبان را نداشته باشد، به ترتیب فونت‌های بعدی بارگزاری می‌شوند و همه با هم بدون دلیل خوانده نمی‌شوند.
ممنون از زمانی که برای پاسخ دهی به من قرار دادید . سوال اصلی من این بود که قالب من فونت وزیر رو اپلود کرده تا همه با این فونت سایت منو ببینند اگر مثلا به هر دلیلی فونت من لود نشد مثلا از فونت tahomaکه فونت پیش فرض ویندوز هست یا فونت arial در اولویت بعدی قرار بگیرندمثلا:
font-family:'vazir' ,'tahoma','arial';
چرا برداشته مثلا:
font-family: ‘arial’;
این طوری از فونت arialاستفاده کرده این کار باعث لود شدن هم فونتarial و هم فونت vazir در یک صفحه نمی شود و باعث کندی نمی شود به نظر من این کار درستی نیست میشه در این باره راهنماییم کنید.
ممکن است در قالب سایت شما اشکالی در مورد فونت باشد که می‌بایست برطرف بشود
سلام خسته نباشید ممنون از مقاله کاربردیتون .
یک سوالی از خدمتتون داشتم فونت اصلی سایت من vazir است و فونت arial رو به عنوان فونت جایگزین قرار دارم به این صورت :
font-family:’vazir’ ,’arial’;
سوالم این هست که فونت هایی مثل arial و sans-serif رو هم باید دانلود کرد و داخل سایت اپلود کرد و یا نه چون این فونت ها پیش فرض مرورگر هست نیاز به اپلود در سایت ندارد.
با سلام
فهرست برخی از فونت‌های قابل استفاده در اغلب سیستم عامل‌ها را اینجا ببینید.