[+1] อยากได้วิธีทำหรือโค้ด @font-face (css) ที่ใช้งานได้จริง ๆ หน่อยครับ

[nuningplus]

font ที่ใช้เป็นภาษาไทย (supermarket) ผมลองเอาโค้ดวิธีทำจาก Google มาลองใช้ดู บางอันมันไม่แสดงผลบ้าง บางเบราเซอร์ไม่แสดงบ้าง แก้อยู่หลายชั่วโมงก็ไม่ได้ซักที อยากได้วิธีที่ทำแล้วแสดงผลได้แน่นอนครับ

เลยขอรบกวนเพื่อน ๆ ช่วยบอกวิธี ลิงค์ หรือวิธีทำมาก็ได้ครับ

ขอบคุณมากครับ

[myong1]

โค้ด เลือก ขยาย

http://www.fontsquirrel.com/fontface/generator

ผมทำจากที่นี่ครับ upload font ขึ้นไป ส่วนใหญ่เอามาจาก google font

แล้วทำตามขั้นตอน ผมลองทำแล้วก็ใช้ได้นะครับ

[Addyklub]

ใช้ cufon (ครูฝน) หรือเปล่าครับผมใช้อยู่ได้นะครับ

[nuningplus]

ใช้ cufon (ครูฝน) หรือเปล่าครับผมใช้อยู่ได้นะครับ

ไม่เคยครับ ไม่ทราบว่าใช้ยังไงหรอครับ

[nuningplus]

โค้ด เลือก ขยาย

http://www.fontsquirrel.com/fontface/generator

ผมทำจากที่นี่ครับ upload font ขึ้นไป ส่วนใหญ่เอามาจาก google font

แล้วทำตามขั้นตอน ผมลองทำแล้วก็ใช้ได้นะครับ

จะลองใช้ดูครับ เดี๋ยวมารายงานผลอีกทีครับ ขอบคุณมากครับ

[nuningplus]

โค้ด เลือก ขยาย

http://www.fontsquirrel.com/fontface/generator

ผมทำจากที่นี่ครับ upload font ขึ้นไป ส่วนใหญ่เอามาจาก google font

แล้วทำตามขั้นตอน ผมลองทำแล้วก็ใช้ได้นะครับ

จะลองใช้ดูครับ เดี๋ยวมารายงานผลอีกทีครับ ขอบคุณมากครับ

ลองดูแล้วครับ font ที่ผมใช้เป็นฟอนต์ภาษาไทย supermarket โหลดมาจาก f0nt.com พอ generate code ออกมาแล้วใช้ได้้แต่ภาษาอังกฤษอะครับ ภาษาไทยไม่ได้

[TummZ]

หลังจาก upload font ขึ้นไปแล้ว ให้เลือกหัวข้อ  EXPERT...

แล้วไล่ลงมาด้านจะเจอหัวข้อ Subsetting: ให้ติ๊กเลือก  No Subsetting

จากนั้นก็ดาวโหลด ใช้ภาษาไทยได้แล้วครับ

[jonhconne]

Code CSS

โค้ด เลือก ขยาย

@font-face { 
 
    font-family: 'supermarket'; 
  /* ใส่ชื่อ Font */ 
    src: url('http://www.youdomain.com/css/font/supermarket.eot'); 
  /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .EOT (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */ 
    src: local('myfont'), url('http://www.youdomain.com/css/font/supermarket.ttf') format('truetype'); 
/* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .TTF (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */ 
    font-weight: normal; 
    font-style: normal; 
 
} 

นำไฟล์ ttf ไปแปลงเป็น eot ที่เว็บด้านล่าง
http://www.kirsle.net/wizards/ttf2eot.cgi

เส็รจแล้วอัพโหลดขึ้นโฮสทั้งสองอันเลย
แค่นี้ก็เรียบร้อย

[pawitk]

Code CSS

โค้ด เลือก ขยาย

@font-face { 
 
    font-family: 'supermarket'; 
  /* ใส่ชื่อ Font */ 
    src: url('http://www.youdomain.com/css/font/supermarket.eot'); 
  /* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .EOT (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */ 
    src: local('myfont'), url('http://www.youdomain.com/css/font/supermarket.ttf') format('truetype'); 
/* ใส่ URL ที่เก็บไฟล์ Font ที่เป็นนามสกุล .TTF (หลักการเหมือนแทรกรูปภาพธรรมดาๆ ครับ) */ 
    font-weight: normal; 
    font-style: normal; 
 
} 

นำไฟล์ ttf ไปแปลงเป็น eot ที่เว็บด้านล่าง
http://www.kirsle.net/wizards/ttf2eot.cgi

เส็รจแล้วอัพโหลดขึ้นโฮสทั้งสองอันเลย
แค่นี้ก็เรียบร้อย

เพิ่งเห็นว่ามีเว็บแปลงให้แล้ว

ของผมเข้าไปที่นี่ โหลดโปรแกรมแปลง ttf-->eot ก็ง่ายดีนะครับ แต่ต้องลองใช้ Dos นิดหน่อยคิวว่าไม่ยาก....ลองไปดูกัน

โค้ด เลือก ขยาย

http://www.codetukyang.com/html/technic/fontface.htm