• June 3, 2017

    @font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ font ที่ไม่ได้ถูกติดตั้งไว้ที่เครื่องของ users ได้
    หลักการของมันก็ง่ายๆ คือจะทำหน้าที่เป็น “ตัวระบุ” ที่อยู่ของ “font file” ที่เราต้องการจะใช้

    @font-face {
        font-family: Helvetica;
        src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
    }
    body {
        font-family: Helvetica;
    }
    ตัวอย่างนี้ บางคนไม่มี font “Helvetica” ติดตั้งในเครื่อง เลยใช้ “@font-face rule”
    จากนี้ เมื่อมี elements ใดเรียกใช้ “Helvetica” จะไม่อ่าน font file จากเครื่องของ user แต่จะอ่านจากลิ้งอ้างอิงแทน

    ถ้าอยากจะใช้ font หลายตัวร่วมกัน เพิ่ม “@font-face rule” ไปอีก
    ถ้าไม่มี “@font-face rule” web browsers จะหา font จากเครื่องของ user เสมอ

    @font-face {
        font-family: Helvetica;
        src: url('http://www.yourdomain.com/fonts/Helvetica.ttf');
    }
    @font-face {
        font-family: Georgia;
        src: url('http://www.yourdomain.com/fonts/Georgia.ttf');
    }
    body {
        font-family: Helvetica;
    }
    h1 {
        font-family: Georgia;
    }

    แต่ละ web browsers รองรับ font file ในรูปแบบ(format) ที่แตกต่างกันออกไป
    จากตัวอย่างข้างต้น ใช้ font file สกุล “ttf” หรือ “TrueType”
    font file รูปแบบนี้นิยมมาก แต่ ยังมีบาง web browsers ไม่รองรับ font file นามสกุลนี้ แล้วต้องทำไง?

    สมัยก่อน web browser ที่รองรับ @font-face มีแต่ Internet Explorer จึงต้องเลือกใช้ font file ที่ IE รองรับ คือ “eot”

    @font-face {
        font-family: Helvetica;
        src: url('Helvetica.eot');
    }

    ต่อมา web browsers ต่างๆ เริ่มรองรับ @font-face มากขึ้น แต่รองรับ font file ในรูปแบบที่ไม่เหมือนกัน เราจึงต้องจัดเตรียม font file ในรูปแบบต่างๆ มาให้พร้อม เพื่อให้สามารถใช้ได้กับทุกๆ web browsers

    @font-face {
        font-family: Helvetica;
        src: url('Helvetica.eot'), url('Helvetica.woff'), url('Helvetica.ttf');
    }
    siamhtml.com/css-font-face-คืออะไร-วิธีใช้-cross-browser/

    ใช้ google font ก็ได้ง่ายดีแต่ยังมี font ไทยน้อย



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories