فونت‌های نامرئی در طراحی وب

Blank Font - فونت نامرئی

یکی از ایده‌های جدید در طراحی وب، استفاده از فونت‌های نامرئی است. یک فونت نامرئی فونتی است که تمام نویسه‌های آن خالی هستند و متن‌های نوشته شده با آن هیچ فضایی اشغال نمی‌کنند.
یکی از مشهورترین این فونت‌ها Adobe Blank نام دارد که از این نشانی می‌توانید آن را دریافت کنید.
این فونت‌ها می‌توانند کاربردهای گوناگونی داشته باشند که چند نمونه از آن‌ها را در ادامه مشاهده می‌کنید:

آگاهی از بارگزاری کامل فونت

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

span.font-load-detection {
	font-family: AdobeBlank, CustomFont;
}

خالی ماندن سایت پیش از بارگزاری فونت اصلی

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

جلوگیری از ایجاد فاصله بین عنصرها

عنصرهای HTML که حالت نمایش inline-block داشته باشند، باید بدون فاصله در ادامه‌ی یکدیگر قرار بگیرند تا بینشان فاصله نیفتد. این شکل نمایش معمولا در منوهای سایت یا برای برخی نیازهای دیگر مورد استفاده قرار می‌گیرد. می‌توان از یک فونت نامرئی برای متن پس زمینه استفاده کرد تا این فاصله از بین برود.

بهینه‌سازی موتورهای جستجو – SEO

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

<style>
	h1 {
		font-family: AdobeBlank;
		background-image: url( 'user-sees-this-image.png' );
	}
</style>
<h1>Google sees this text</h1>

استفاده در فونت‌های آیکون

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

<style>
	span.icon {
		font-family: IconFont;
	}
</style>
<span class="icon">Google+</span><!-- small letters are invisible -->
<span class="icon">Facebook</span>
<span class="icon">Twitter</span>
این نوشته در CSS, HTML, SEO ارسال و , برچسب شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

۵ دیدگاه برای فونت‌های نامرئی در طراحی وب

  1. مجتهدی می‌گوید:

    بسیار بسیار عالی…

    برای تگ H1 که گاهی به جاش عکس استفاده می‌کنیم خیلی خوبه.

    • امیرمسعود ایرانی می‌گوید:

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

  2. سلام مسعود خان. خسته نباشی.
    سایتتون را تو وبلاگم (لینک دوستان) گذاشتم تا بقیه دوستان هم بتونند از مطالب بسیار مفیدتون استفاده کنند.

    انشاءالله که موفق باشید.

  3. کامکار می‌گوید:

    سلام…

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

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      برای این منظور باید فایل فونت‌ها را در جایی آپلود کنید و با ویرایش قالب‌های سایت blog هم آشنایی داشته باشید
      بنده تجربه‌ای در زمینه ویرایش قالب‌های این سایت ندارم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>