Please select To the mobile version | Continue to access the desktop computer version
| |

ศูนย์จัดการความรู้ สพป.ลย.๑

 Forgot password?
 ลงทะเบียน
Search
View: 635|Reply: 2

ฟอนต์ภาษาไทยสวยๆใช้ในเว็บไซต์เราด้วย CSS @font-face

[Copy link]
Post time: 2015-8-13 12:03:22
| Show all posts |Read mode


Reply

Use magic Report

 Author| Post time: 2017-7-14 10:55:40
| Show all posts
https://www.fontsquirrel.com/tools/webfont-generator

ใช้ลิงค์นี้ครับ


2017-07-14_10-47-21.png
Reply Support Not support

Use magic Report

 Author| Post time: 2017-7-15 11:38:29
| Show all posts
อ้างอิงข้อมูลดีๆ จากเว็บไซต์ [size=0.95em]https://www.designil.com/how-to-embed-web-font.html
ขั้นตอนการแปลงไฟล์ฟ้อนต์ (นามสกุล .TTF, .OTF) ให้ใช้ในเว็บไซต์ได้ กันเลย
1. อัพโหลดไฟล์ฟ้อนต์ผ่าน FONTSQUIRREL.COM WEB FONT GENERATOR
หลังจากดาวน์โหลดฟ้อนต์ไทยมาแล้ว (เช่น จาก F0nt.com) ก็ไปที่หน้าเว็บไซต์ FontSquirrel Web Font Generator ครับ
1) คลิกปุ่มอัพโหลดฟ้อนต์
2) คลิก Expert… เพื่อแสดง Option เพิ่มขึ้น
ข้อควรระวัง: ถ้าฟ้อนต์มีหลายน้ำหนัก (เช่น Light, Regular, Semi-bold, Bold) ควรจะเลือกใช้ในเว็บแค่ 1-2 น้ำหนัก เท่านั้น เพราะยิ่งมีเราใช้หลายน้ำหนัก ยิ่งมีไฟล์ฟ้อนต์เยอะ และทำให้เว็บไซต์โหลดนานขึ้นตามไปด้วย ปกติผมจะเลือกแค่น้ำหนัก Regular กับ Bold หรือ Semi-bold แล้วแต่ดีไซน์ของฟ้อนต์
ข้อไม่ควรระวัง: …แต่โชคดีว่าฟ้อนต์ฟรี (ทั้งไทยและต่างประเทศ) ส่วนใหญ่จะมีไม่กี่น้ำหนักครับ บางฟ้อนต์แจกมาแค่น้ำหนักเดียวด้วยซ้ำ #น้ำตาจิไหลขอแชร์นะคะ

ตัวอย่างการนำฟ้อนต์ RSU ไปใช้ทำ @font-face

2. ติ๊ก NO SUBSETTING แล้วดาวน์โหลดฟ้อนต์ได้เลย
3) หลังจากกด Expert… แล้ว จะมี Option โผล่มาให้เลือกเยอะแยะไปหมด ให้เลื่อนลงมาหาหัวข้อ Subsetting แล้วเลือก No Subsetting ส่วน Option อื่น ๆ ไม่ต้องสนใจ
4) กดติ๊กถูกเพื่อยอมรับข้อตกลง แล้วกดปุ่ม Download Your Kit ได้เลย
ในขั้นตอนการ Download ฟ้อนต์ต้องรอสักพักนึงครับ ประมาณ 30 – 60 วินาทีต่อฟ้อนต์ ซึ่งยิ่งแปลงฟ้อนต์หลายน้ำหนักก็จะยิ่งใช้เวลาเยอะ เราจะดูได้จากด้านบนสุดว่ากำลังประมวลผลฟ้อนต์ไหนอยู่
3. เปิดไฟล์ ZIP ที่ดาวน์โหลดจาก FONT SQUIRREL
เมื่อเปิดไฟล์ ZIP ออกมาจะพบกับไฟล์เยอะแยะมากมาย ไม่ต้องตกใจครับ แบ่งได้ง่าย ๆ ดังนี้
  • ชื่อฟ้อนต์-demo.html – เปิดไฟล์นี้ใน Web Browser เพื่อดูได้เลยว่าฟ้อนต์ที่เราแปลงมา แสดงผลได้ถูกต้องมั้ย
  • ชื่อฟ้อนต์.eot, .ttf, .woff, .woff2 – เป็นไฟล์ฟ้อนต์ที่เราต้องอัพขึ้นไปบนเซิร์ฟเวอร์ เพื่อให้แสดงผลในหน้าเว็บไซต์ได้ครับ ที่ต้องมีไฟล์หลายนามสกุลก็เพราะว่า แต่ละ Web Browser (Internet Explorer, Firefox, Chrome, iPhone Safari, Android) ต้องใช้นามสกุลไฟล์แตกต่างกัน
  • โฟลเดอร์ specimen_files – เป็นไฟล์สำหรับหน้า demo ครับ ไม่ต้องใช้
  • stylesheet.css – โค้ด CSS สำหรับดึงฟ้อนต์มาแสดงในหน้าเว็บไซต์
ถ้าเราเปิด demo (ข้อ 1.) เห็นว่าแสดงผลถูกต้องแล้ว ก็อัพโหลดไฟล์ฟ้อนต์ต่าง ๆ (ข้อ 2.) ขึ้นไปในเว็บไซต์เราเลยครับ หลังจากนั้นก็ก็อปปี้โค้ดจาก stylesheet.css (ข้อ 4.) ไปใส่ด้านบนสุดในไฟล์ CSS ของเรา
โค้ดจาก Stylesheet.css จะหน้าตาประมาณนี้ครับ
  1. /* Generated by Font Squirrel (https://www.fontsquirrel.com) on May 19, 2015 */
  2. @font-face {
  3.     font-family: 'rsuregular';
  4.     src: url('rsu_regular-webfont.eot');
  5.     src: url('rsu_regular-webfont.eot?#iefix') format('embedded-opentype'),
  6.          url('rsu_regular-webfont.woff2') format('woff2'),
  7.          url('rsu_regular-webfont.woff') format('woff'),
  8.          url('rsu_regular-webfont.ttf') format('truetype');
  9.     font-weight: normal;
  10.     font-style: normal;
  11. }
  12. @font-face {
  13.     font-family: 'rsubold';
  14.     src: url('rsu_bold-webfont.eot');
  15.     src: url('rsu_bold-webfont.eot?#iefix') format('embedded-opentype'),
  16.          url('rsu_bold-webfont.woff2') format('woff2'),
  17.          url('rsu_bold-webfont.woff') format('woff'),
  18.          url('rsu_bold-webfont.ttf') format('truetype');
  19.     font-weight: normal;
  20.     font-style: normal;
  21. }
Copy the Code



สังเกตที่บรรทัด font-family ครับ มันจะบอกชื่อฟ้อนต์ที่เราต้องไปใส่ใน CSS font-family เพื่อทำให้ฟ้อนต์นี้แสดงผล ในกรณีนี้คือ
  1. font-family: 'rsuregular';
Copy the Code

และ
  1. font-family: 'rsubold';
Copy the Code

แปลว่าเวลาเราจะนำฟ้อนต์เหล่านี้ไปใช้งาน ก็เขียนโค้ดแบบนี้ได้เลย
  1. div {
  2.   font-family: 'rsuregular', sans-serif;
  3. }
Copy the Code


เพียงเท่านี้ก็จะได้ฟ้อนต์ไทยสวย ๆ มาแสดงผลในหน้าเว็บไซต์แล้วครับ
ข้อควรระวัง: ไฟล์ฟ้อนต์ ต้องอยู่โฟลเดอร์เดียวกับไฟล์ CSS
จำโค้ดที่เราก็อปปี้จากไฟล์ Stylesheet.css ไปใส่ในไฟล์ CSS ของเราได้มั้ยครับ? มันจะมีการเรียกใช้ฟ้อนต์ด้วย url(…) อยู่ เช่น
  1. src: url('rsu_bold-webfont.eot');
Copy the Code


ซึ่งการเรียก Path นี้จะเหมือนกับการเรียกรูปผ่าน URL เลยครับ คือ ถ้าเขียนแบบ url(‘ชื่อไฟล์’) แปลว่า ไฟล์ฟ้อนต์ต้องอยู่ในโฟลเดอร์เดียวกับไฟล์ CSS หรือถ้าเราต้องการย้ายฟ้อนต์ไปเก็บไว้ในโฟลเดอร์ชื่อ fonts อีกที ก็ต้องเปลี่ยน Path เป็น
  1. src: url('fonts/rsu_bold-webfont.eot');
Copy the Code
เป็นต้นครับ ถ้าใส่ในเว็บแล้วฟ้อนต์ไม่แสดง ให้เช็ค Path ก่อนเลยว่าใส่ถูกมั้ย
แล้วมีฟ้อนต์ไทยไหนสวย ๆ ที่เหมาะกับการใช้งานบนเว็บไซต์บ้าง ?
ฟ้อนต์แต่ละฟ้อนต์มีลิขสิทธิ์ไม่เหมือนกันนะครับ บางฟ้อนต์ฟรี แต่ใช้ในเว็บไซต์ไม่ได้ (ต้องจ่ายเงินเพิ่ม) หรือบางฟ้อนต์เสียเงินซื้อมา แต่เราก็ไม่ได้ลิขสิทธิ์ในการแปลงเป็น Web Font ก็มีครับ ถ้าพลาดไปแปลงฟ้อนต์เสียเงินอาจจะจนได้ ต้องระวังตรงนี้ไว้ด้วยครับ

Reply Support Not support

Use magic Report

You have to log in before you can reply Login | ลงทะเบียน

Points Rules

ประวัติการแบน|ติดต่อเรา|ศูนย์จัดการความรู้ สพป.ลย.๑  

2017-7-24 03:35 GMT+7 , Processed in 0.129352 sec., 17 queries .

Powered by Discuz! X3.2

Release 20141225, © 2001-2017 Comsenz Inc.

MultiLingual version, Rev. 441, © 2009-2017 netdepviet.org

Quick Reply To Top Return to the list