imkopkap

#9 CSS: การเปลี่ยน Font ด้วย CSS

ใช้เวลา 5 นาที 16/11/2014

สำหรับผู้เริ่มต้นทำเว็บใหม่ๆ เริ่มสงสัยกันแล้วว่า จะเปลี่ยน Font ที่ธรรมดาตัวนี้ได้ยังไง? ซึ่งแก๊ปแนะนำก่อนเลยว่า CSS สามารถเปลี่ยน Font ได้ครับ! เปลี่ยนง่ายๆ ด้วยโค้ด font-family

 

 

การใช้ font-family

p {
    font-family: "Times New Roman";
}

โดนข้างในของ font-family นะครับ ค่า value ของมันจะเป็นชื่อ font ดังในตัวอย่างก็คือ Times New Roman

 

การใช้ font-face

ใน CSS ของเราจะมี font-family ไม่กี่ตัว ถ้าเราอยากได้ font ที่แปลกๆหน่อยเราจะใช้ font-face กันครับ การเรียกใช้จะเหมือนกับ font-family แต่ว่าการทำ font-face นั้นเราต้องมี font จริงๆอยู่ในโฟลเดอร์ของเว็บเรา แล้วเรียกมันออกมาแบบนี้

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

ถ้านั่งพิมพ์แบบนี้เหนื่อยแน่ๆครับ แก๊ปแนะนำเว็บไซต์ที่ Generate font-face ให้กับเรา เพียงแค่เราอัปโหลด font ขึ้นไป ได้ที่เว็บ  fontsquirrel

 

ขั้นตอนการใช้งาน fontsquirrel

1. ให้กด add font ที่เราต้องการครับ

add

 

2. คลิกที่ Expertex

 

3. กด No subsettingsun

 

4. กด Yesyes

 

5. กด ดาวน์โหลด your kit เป็นอันจบครับ จากนั้นก็วางไว้ที่โฟลเดอร์ของเว็บเรา แล้วเปลี่ยนตำแหน่งของ font  จากนั้นพร้อมใช้งานแล้วครับ

Download

บันทึกแนะนำ