ใส่ฟอนต์สวยๆให้เว็บ


Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวยๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่นๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์

ปัญหานี้แก้ได้ง่ายๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:\Windows\Fonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่นๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุกๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย

@font-face {
    font-family: 'THSarabunNewRegular';
    src: url('thsarabunnew.eot');
    src: url('thsarabunnew.eot') format('embedded-opentype'),
         url('thsarabunnew.woff') format('woff'),
         url('thsarabunnew.ttf') format('truetype'),
         url('thsarabunnew.svg#THSarabunNewRegular') format('svg');
}

ต่างจากตัวอย่าง(ในอุดมคติ)ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว

  • thsarabunnew.ttf (TrueType)
  • thsarabunnew.eot (Embedded OpenType)
  • thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ๆ
  • thsarabunnew.woff (Web Open Font Format)

ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ

body
{
	color:#c00000;
	font-family: 'THSarabunNewRegular', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: 14px;
}

สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน

About plusmagic

PHP lover in thailand

Posted on 2013/07/30, in CSS, programming and tagged , , , , , , , , , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: