.::www.Chayoo.in.th::.

 ลืมรหัสผ่าน
 สมัครสมาชิก
ค้นหา
ดู: 313|ตอบกลับ: 2

@font-face การฝังฟอนต์ ลงในหน้าเว็บ

[คัดลอกลิงก์]
@font-face  การฝังฟอนต์  ลงในหน้าเว็บ ให้สามารถแสดงผลฟอนต์แปลกๆ ได้โดยไม่ต้องติดตั้งลงที่เครื่องปลายทาง  โดยการทำงานร่วมกับ css stylesheet ซึ่งจากการทดสอบ สามารถทำงานได้ดีทั้งบน FF และ IE8 แต่ใน IE6 ผมไม่แน่ใจเพราะไม่ได้ทดสอบ ทั้งนี้หลักการทำงานของ  @font-face ตามความเข้าใจผม
1. ประกาศ @font-face ตั้งชื่อ font
2. ใส่ font ลงไป (หลักการเหมือน เราใส่รูปและเรียกรูปใช้งาน)
3. เรียกการใช้ font

ตัวอย่างเว็บ ผมโหลด ฟ้อนต์ ฟรี ชื่อ ไอแอน
http://www.f0nt.com/release/iannnnnctx/


ประกาศ @font-face ตั้งชื่อ font family เรียกใช้งาน font อย่าลืมที่จะโหลด font ไปวางด้วย  


@font-face {
    font-family: '2005_iannnnnCTX-9001';

    src: url('../image/2005_iannnnnCTX-9001.ttf') format('truetype');
}


เรียกใช้งาน ฟ้อนต์

#divfont {
    font: 2.5em/1.5em '2005_iannnnnCTX-9001', Arial, sans-serif;letter-spacing:
}

การนำ @font-face  ไปใช้งานร่วมกัน opencart
สำหรับ opencart เปิดไฟล์ catalog\view\theme\ชื่อเทมเพลต\stylesheet\stylesheet.css
ใส่
@font-face {
    font-family: '2005_iannnnnCTX-9001';

    src: url('../image/2005_iannnnnCTX-9001.ttf') format('truetype');     font-weight:lighter; font-weight:lighter;
}
สำหรับตำแหน่งไหนที่เราจะเรียกใช้งาน ให้เรา เพิ่มคำสั่ง font และเรียกใช้งานเข้าไปด้วย

#divfont {
    font: 2.5em/1.5em '2005_iannnnnCTX-9001', Arial, sans-serif;letter-spacing:
}
จากตัวอย่าง เราเรียกใช้ฟ้อนต์ จะเรียงลำดับ 1,2,3 ตามนี้  2005_iannnnnCTX-9001 อันดับ 1 ถ้าไม่มี font นี้จะเรียกใช้  Arial ต่อไป ตามลำดับ  
อีกตำแหน่งที่ำสำคัญ  ให้ลำคัญสั่งที่ต้องลบออก
* {
    font-family: Arial, Helvetica, sans-serif;
}
ไม่เช่นนั้น จะไม่สามารถใช้งาน ได้เพราะ opencart ประกาศเรียก ฟ้อนต์ทั้งหมดเป็น   Arial, Helvetica, sans-serif นี่จึงเป็นสาเหตุหนึ่งที่  @font-face ไม่สามารถใช้งานได้


ขอขอบคุณความรู้ดีๆจาก @font-face
โพสต์ 2012-12-4 18:46:55 | ดูโพสต์ทั้งหมด
555+
ไปใช้ตั้งนาน ครับ
ถูกใจ มากๆๆๆ....
โพสต์ 2012-12-8 21:17:47 | ดูโพสต์ทั้งหมด
ขอบคุณคับ
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

รายละเอียดเครดิต

ประวัติการแบน|Mobile|รูปแบบข้อความล้วน|www.Chayoo.in.th

GMT+8, 2020-7-11 20:27 , Processed in 0.041499 second(s), 14 queries , Gzip On.

Powered by Discuz! X3.4 R20180101, Rev.59

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้