کار با فونت های وب

سی اس اس به شما امکان می دهد یک فایل فونت وب را برای مرورگرهای سرویس گیرنده تعریف کنید تا با استفاده از آن دانلود شوند قانون @font-face. ممکن است متوجه شوید که قاعده font-face@ از هیچ یک از قراردادهای نامگذاری قوانین سبک استاندارد که در فصل 2 این مقاله بحث کردم، پیروی نمی کند. مینی کتاب دلیلی برای آن وجود دارد.

قانون font-face@ یک دستور CSS را تعریف می کند. دستورات CSS دستورالعمل هایی به مرورگر برای انجام برخی اقدامات در حین بارگذاری استایل ها هستند. دستورات CSS با نماد at (@) شروع می‌شوند و باید در ابتدای ناحیه صفحه سبک CSS قرار گیرند.

در اینجا فرمت قانون @font-face آمده است:

@font-face {

font-family: name;

src: url(location);

[descriptor:value];

}

ویژگی font-family یک نام منحصر به فرد برای فونت در شیوه نامه شما تعریف می کند. ویژگی src مکان فایل فونت را در سرور شما یا به صورت یک تعریف می کند مسیر مطلق یا نسبی به دنبال این دو ویژگی، می‌توانید توصیف‌گرهایی را اضافه کنید که زمان فونت را نشان می‌دهند باید استفاده شود (مانند متن پررنگ یا برای متن با حروف کج).

یک مثال از تعریف فونت وب به این صورت است:

@font-face {

font-family: myfont;

src: url(myfont.woff);

}

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

div {

font-family: myfont;

}

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

»»font-stretch: مشخص می کند که چگونه فونت باید کشیده شود تا یک فاصله پر شود. را پیش فرض نرمال است، اما مقادیر دیگر متراکم یا بزرگ می شوند.

»»font-style: نحوه استایل بندی فونت را مشخص می کند. مقادیر نرمال هستند، مورب یا مورب

»»font-weight: بولد بودن فونت را مشخص می کند. مقادیر عادی، پررنگ، یا مقادیر عددی از 100 تا 900. با تعیین مقادیر مختلف سبک فونت و وزن فونت، می توانید موارد بیشتری را تعیین کنید بسته به نحوه استفاده از فونت در صفحه وب، بیش از یک فایل فونت.

رسیدگی به پرسش های رسانه ای

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

استاندارد CSS3 دارای ترفندهایی است که می توانید برای تعیین زمان استفاده از آنها استفاده کنید شما باید سبک و طرح صفحات وب خود را بر اساس نحوه مشاهده برنامه توسط بازدیدکنندگان سایت تغییر دهید. این بخش نحوه استفاده از این ترفندها را پوشش می دهد.

با استفاده از دستور @media

استاندارد CSS2 دستور @media CSS را برای کمک به تشخیص نوع دستگاهی که صفحه وب روی آن مشاهده می‌شود، تعریف کرده است. سپس می توانید سبک هایی را بر اساس آن نوع رسانه ایجاد کنید.

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

استاندارد CSS2 چندین نوع رسانه مختلف را برای استفاده در قانون @media تعریف کرده است. همانطور که در جدول زیر نشان داده شده است.

انواع دستگاه های خروجی   =   all

دستگاه هایی که خط بریل تولید می کنند   =   braille

چاپگرهای بریل   =   embossed

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

چاپگرها   =   print

پروژکتورهای صفحه بزرگ   =   projection

مانیتورهای استاندارد کامپیوتر   =   screen

خوانندگان متن به گفتار   =   speech

پایانه های تله تایپ   =   tty مانیتورهای استاندارد کامپیوتر   =   tv