Google Font API คืออะไร? ทำไมเว็บดีไซเนอร์ควรรู้จัก

Google Font API คืออะไร? ทำไมเว็บดีไซเนอร์ควรรู้จัก

GOOGLE FONT API คืออะไร?

ถ้าคุยกับเว็บดีไซเนอร์ มีความเป็นไปได้สูงว่าเค้าจะไม่รู้ว่า API คืออะไร ขอสรุปง่าย ๆ ว่ามันเป็น ชุดคำสั่งที่เอาไว้ให้เว็บไซต์อื่นมาใช้เชื่อมต่อกับเว็บไซต์เราได้ง่าย ๆ อย่างในกรณีนี้ Google ก็อนุญาตให้เราใช้ชุดคำสั่งเพื่อดึงฟ้อนต์จากกูเกิ้ลมาใส่เว็บเราง่าย ๆ นั่นเอง

โดยเมื่อก่อน ถ้าเราจะใช้ฟ้อนต์แปลก ๆ บนเว็บ แล้วเครื่องของคนเข้าชมเว็บไซต์เราไม่มีฟ้อนต์นั้น เค้าก็จะมองไม่เห็น ซึ่งทำให้เว็บดีไซเนอร์ต้องไปเขียนตัวอักษรใส่รูปแล้วเอามาแปะแทน แต่หลัง ๆ มานี้ก็มีวิธีที่จะเอาฟ้อนต์แปลก ๆ พวกนั้นมาใช้ในเว็บไซต์เราออกมาหลายวิธี การใช้ Javascript ของ Google Font API ก็เป็นหนึ่งในนั้น

สำหรับวิธีอื่น ๆ ก็เช่น การใช้ Flash (siFR), Javascript (Cufon) หรือแม้แต่ CSS3 ก็สามารถใช้ @font-face ได้เช่นกัน โดยแต่ละวิธีจะมีข้อดีข้อเสียแตกต่างกัน เช่น ในด้านความเร็ว หรือในด้านบราวเซอร์ที่รองรับ

 

ข้อดีของ GOOGLE FONT API คืออะไร

  • ฟรี ใช้ได้ง่าย ไม่ต้องยุ่งกับโค้ดมาก
    เว็บดีไซเนอร์มักจะไม่ถูกโรคกับโค้ด เพราะฉะนั้น Google Font API จะเหมาะกับดีไซเนอร์มาก เพราะแค่ก็อปแปะโค้ดก็เสร็จแล้ว
  • ฟ้อนต์เป็น Open source
    ทำให้สามารถใช้บริการนี้ได้ฟรีทั้งในเว็บส่วนตัว หรือเว็บที่หากำไร
  • บราวเซอร์รองรับเยอะ แม้แต่ IE6 ก็รองรับ
    ทำให้การใช้ Google Font API ไม่ต้องกลัวว่าแต่ละบราวเซอร์จะแสดงผลไม่เหมือนกัน โดยบราวเซอร์ที่รองรับ คือ:
    Chrome 4.2+, Firefox 3.5+, Safari 3.1+, Opera 10.5+, Internet Explorer 6+
  • ใช้ CSS แต่งฟ้อนต์ที่เรียกมาใช้ได้
    แต่งฟ้อนต์ด้วย CSS อย่าง text-shadow หรือคำสั่งอื่น ๆ ก็ทำได้ไม่มีปัญหา
  • ประหยัด Bandwidth ที่ใช้ เพิ่มความเร็วในการโหลดฟ้อนต์
    เทคนิคแทนฟ้อนต์อื่น ๆ ส่วนใหญ่ต้องโฮสต์ไฟล์ฟ้อนต์เอง แต่บริการนี้กูเกิ้ลโฮสต์ไฟล์ให้เราเลย มีระบบแคชฟ้อนต์ด้วย แถมโฮสต์ของกูเกิ้ลก็เร็วอีก ดีกว่าโฮสต์ไฟล์ฟ้อนต์ไว้เองเยอะเลย

 

วิธีใส่ GOOGLE FONT API ในเว็บไซด์

สำหรับวิธีใส่ฟ้อนต์จากกูเกิ้ลในเว็บไซต์เราก็ไม่ยากเลย ขอแค่มีความรู้ CSS นิดหน่อยก็พอ

แต่สำหรับคนที่ไม่มีพื้นฐาน CSS หรือ HTML เลย สามารถใช้เครื่องมือ Font Preview เพื่อทดสอบและสร้างโค้ดไว้ไปแปะบนหน้าเว็บไซต์ได้เลย มาดูกันเลยดีกว่าว่าวิธีใช้ฟ้อนต์จาก Google Font API ทำอย่างไร:

  1. เลือกฟ้อนต์ที่ต้องการใช้จากGoogle Font Directoryโดยการคลิกบนฟ้อนต์นั้น ๆ

ฟ้อนต์ยังมีไม่เยอะ ถ้าอยากได้แบบมีฟ้อนต์ให้เลือกเยอะ ๆ ลองไปใช้บริการเสียตังค์ของ Typekit ดูนะ

  1. หน้ารายละเอียดฟ้อนต์จะโผล่ขึ้นมา คลิกที่แท็บ “Get The Code” สีน้ำเงิน อยู่ใต้โลโก้สีเหลือง

หน้านี้จะบอกชื่อคนดีไซน์ ชื่อฟ้อนต์ ขนาดไฟล์ (ส่วนใหญ่จะเบามาก เพราะถูกบีบอัดแล้ว)

  1. ก็อปปี้โค้ดในกล่องแรกสุด ใต้หัวข้อ “Embed the font into your page” ไปใส่ใต้แท็ก ในเว็บไซต์คุณ

ตัวอย่างเช่น ผมใช้ฟ้อนต์ชื่อ Reenie Beanie ก็จะต้องก็อปปี้โค้ดแบบนี้

<link href='http://fonts.googleapis.com/css?family=<strong>Reenie+Beanie' rel='stylesheet' type='text/css'>

แค่นี้ ตอนโหลดหน้าเว็บไซต์ ก็จะมีการโหลดฟ้อนต์นี้ขึ้นมาเพื่อให้พร้อมใช้งานแล้ว

  1. เรียกฟ้อนต์มาใช้ผ่านCSS

แค่กำหนดชื่อฟ้อนต์ที่เราเลือกใน font-family ก็ใช้งานได้แล้ว ลองดูตัวอย่างด้านล่าง

h1 { font-family: 'Reenie Beanie', arial, serif; }

โค้ดนี้จะใช้ฟ้อนต์ Reenie Beanie กับแท็ก H1 ครับ ซึ่งจะเห็นว่ามีการตั้งฟ้อนต์ไว้ 3 อัน คือ Reenie Beanie, arial, และ serif

การตั้งแบบนี้ CSS จะเรียกใช้จากซ้ายไปขวา ถ้าหาฟ้อนต์แรกไม่เจอก็จะไปโหลดฟ้อนต์สอง (Arial) และถ้าหาฟ้อนต์สองไม่เจอก็จะไปเรียกฟ้อนต์ที่สาม (Serif) สำหรับใน Firefox ระหว่างที่โหลดไฟล์ฟ้อนต์จากGoogle Font API มาแสดงผล ก็จะแสดงฟ้อนต์ Arial ก่อน

สรุปเกี่ยวกับ GOOGLE FONT API

Google Font API ถือเป็นบริการ Font Replacement อีกตัวที่น่าสนใจ เพราะทำได้ง่าย ฟรี และถูกลิขสิทธิ์ นอกจากนั้นยังไม่ต้องสมัครสมาชิกเพื่อใช้บริการ ส่วนข้อเสียก็อาจเป็นเรื่องจำนวนฟ้อนต์ที่ยังมีให้เลือกใช้น้อยอยู่

โดย :
 5447
ผู้เข้าชม

บทความที่เกี่ยวข้อง

คุณเคยสงสัยไหมว่าแบรนด์ต่าง ๆ ทั่วโลก มีวิธีทำยังไงถึงทำให้คนรู้จักแบรนด์ คำตอบที่ได้ส่วนมากคงหนีไม่พ้น “การโฆษณา (AD)” หรือ “การประชาสัมพันธ์ (PR)” ว่าแต่ทั้งสองอย่างที่ว่ามานี้ ทำงานอย่างไรล่ะ แตกต่างหรือเหมือนกันอย่างไรบ้าง มีข้อดีข้อเสีย วันนี้จะมาเล่าให้ฟัง
เทรนด์ธุรกิจ ถือเป็นหนึ่งในปัจจัยที่ใช้ประกอบการวางแผนหรือตัดสินใจเกี่ยวกับทิศทางของธุรกิจในอนาคต ฉะนั้นใครที่ใครที่กำลังวางแผนธุรกิจในปีหน้าอยู่ หรือกำลังคิดว่าอยากเริ่มต้นทำธุรกิจใหม่ๆ ลองศึกษา เทรนด์ธุรกิจปี 2018 ดูนะค่ะ เผื่อนำไปประกอบการตัดสินใจได้อย่างเหมาะสม
เมื่อเทคโนโลยีเป็นส่วนหนึ่งของการใช้ชีวิตในปัจจุบัน และมีการเปลี่ยนแปลงอยู่เสมอ จึงหลีกเลี่ยงไม่ได้ที่เทคโนโลยีจะเป็นปัจจัยสำคัญต่อการสร้างความเปลี่ยนแปลงในการศึกษาเช่นกัน โดยจะเห็นได้ว่าปีที่ผ่าน ๆ มา สถาบันการศึกษาทั่วโลกต่างพากันลงทุนจำนวนมากกับเทคโนโลยี เพื่อส่งเสริมการเรียนรู้ และสร้างช่องทางให้ผู้เรียนเข้าถึงหลักสูตรต่าง ๆ มากขึ้น ดังนั้น แน่นอนว่าแนวโน้มการศึกษาในปี 2017 จะเกี่ยวข้องกับเทคโนโลยี "ประชาชาติธุรกิจ" จึงรวบรวมแนวโน้มการศึกษาจากแหล่งข้อมูลต่าง ๆ ไว้ดังนี้ เยสคอร์ส (YesCourse) ผู้สร้างแพลตฟอร์มการกระจายการศึกษาออนไลน์ ซึ่งเป็นพื้นที่ให้สถาบันการศึกษาทั่วโลกได้ขายหลักสูตรการศึกษาออนไลน์ของตน โดยปัจจุบันมีสมาชิกมากกว่า 3,500 สถาบันการศึกษาระบุว่า ในปีที่ผ่านมาการศึกษาออนไลน์ได้เปลี่ยนโฉมหน้าของการศึกษาอย่างมาก และเป็นตัวเสริมให้การศึกษาแบบดั้งเดิมมีประสิทธิภาพมากยิ่งขึ้น เพราะเปิดโอกาสให้ผู้เรียนได้เรียนจากทุกที่ แต่ในปี 2017 ระบบการเรียนออนไลน์แบบเสมือนจริง Virtual Reality (VR) จะกลายเป็นกระแสหลักมากขึ้น ซึ่งเราอาจได้เห็นและได้ยิน VR ในอุตสาหกรรมอื่น ๆ มาแล้ว เช่น การบิน การทหาร และเกม แต่ในอนาคต VR จะเข้ามาเป็นส่วนหนึ่งของการศึกษา เพราะเป็นเครื่องมือที่จะสร้างสภาพแวดล้อมเสมือนจริง ซึ่งทำให้ผู้ใช้เกิดการรับรู้และตื่นตัวในการเรียนรู้มากขึ้น แนวโน้มต่อมา คือ Cloud Migration หรือการเคลื่อนย้ายฐานข้อมูลต่าง ๆ สู่คลาวด์ ซึ่งสถาบันการศึกษานำข้อมูลต่าง ๆ รวมถึงระบบไอทีของตนเองสู่ระบบคลาวด์มากขึ้นทุกวัน เพราะเป็นหน่วยจัดเก็บข้อมูลที่ลดความยุ่งยากในการติดตั้ง การดูแลระบบ ช่วยประหยัดเวลาและลดต้นทุนในการสร้างระบบคอมพิวเตอร์ และเครือข่ายเอง ซึ่งผู้ใช้ทุกคนสามารถเข้าถึงระบบข้อมูลต่าง ๆ ผ่านอินเทอร์เน็ต จัดการบริหารทรัพยากรของระบบ และสามารถแบ่งทรัพยากรร่วมกันได้ง่าย อีกหนึ่งแนวโน้มที่ YesCourse พูดไว้ คือ การวิเคราะห์เชิงทำนาย (Predictive Analytics) และการเรียนเชิงทำนาย (Predictive Learning) ซึ่งในทุก ๆ ครั้งที่ผู้เรียนมีการโต้ตอบกับโปรแกรมการศึกษาออนไลน์ พวกเขาทิ้งรอยดิจิทัลไว้ (Digital Footprint) สิ่งนี้ทำให้สถานศึกษา และครูผู้สอนสามารถใช้ทำนายเพื่อเข้าใจเกี่ยวกับพฤติกรรมของผู้เรียน และสามารถปรับเปลี่ยนหลักสูตรได้ตรงตามความต้องการของผู้เรียนและเหมาะสม นอกจากนั้นยังเป็นข้อดีต่อการเตรียมความพร้อมของสถาบันการศึกษาในการพัฒนาบุคลากร เตรียมพร้อมต่อการเปลี่ยนแปลง และแก้ปัญหาต่าง ๆ ได้ทันท่วงที ส่วนเว็บไซต์ Pathway to Financial Success บอกว่า แนวโน้มการศึกษาจะเข้าสู่ยุค The Internet of Things (IoT) เพราะอินเทอร์เน็ตเกี่ยวข้องกับทุกอุปกรณ์ ไม่ว่าจะเป็นสมาร์โฟน โน้ตบุ๊ก คอมพิวเตอร์ แท็บเลต สิ่งเหล่านี้เกี่ยวข้องกับการศึกษาเรียนรู้มากขึ้นทุกวัน โดยบริษัทการ์ตเนอร์ (Gartner Inc.) ทำนายว่า ในปี 2020 จะมีอุปกรณ์สิ่งของต่าง ๆ เชื่อมต่อกันไม่ต่ำกว่า 20.8 ล้านล้านชิ้นทั่วโลก ดังนั้น รัฐบาลแห่งประเทศอังกฤษจึงทุ่มงบฯลงทุนด้านการวิจัยและศึกษาด้าน IoT ไม่ต่ำกว่า 40 ล้านปอนด์ในปีที่ผ่านมา สิ่งที่ผู้เรียนได้รับประโยชน์จาก IoT ได้แก่ ส่งเสริมการเรียนรู้ร่วมกัน (Collaborative Learning), รู้จักการแก้ไขปัญหาโดยใช้ปัญหาเป็นหลัก (Problem-based Learning), กระตุ้นการเรียนรู้ด้วยตนเองและยั่งยืน (Self-directed Learning), ส่งเสริมเรียนรู้ผ่านพหุประสาทสัมผัส (Multisensory Learning), สร้างความเท่าเทียมกันระหว่างเพศ (Gender Equality) และสร้างห้องเรียนอัจฉริยะ (Creating Smart Classroom) นอกจากนั้น Real-World Case Studies หรือกรณีศึกษาจากโลกแห่งความจริงจะเข้มข้นมากขึ้นในทุกวิชา เพราะเป็นสิ่งที่ใกล้ตัวผู้เรียน และเห็นภาพได้ชัดเจนกว่าข้อมูลในตำรา กรณีศึกษาในโลกแห่งความจริงยังเป็นตัวกระตุ้นให้ผู้เรียนต้องการแสดงความคิดเห็นมากขึ้น และทำให้เกิดการแลกเปลี่ยนเรียนรู้ระหว่างผู้เรียน ในขณะที่ "บิล เกตส์" นักธุรกิจชาวอเมริกัน ซึ่งเป็นหนึ่งในผู้ก่อตั้งบริษัทไมโครซอฟท์ และเป็นผู้บุกเบิกด้านคอมพิวเตอร์ส่วนบุคคลวิเคราะห์ไว้ว่า ค่าใช้จ่ายการศึกษาจะน้อยลงและทุนการวิจัยจะมากขึ้น "เป็นที่รู้กันว่างานวิจัยเป็นสิ่งที่จำเป็นต่อการพัฒนา และการต่อยอดการศึกษา แต่ที่ผ่านมานักวิจัยหลายคนต่างต้องวิ่งเต้นหาทุนวิจัย และหาการสนับสนุนจากรัฐบาล แต่เมื่อเทคโนโลยีเข้ามาเปลี่ยนแปลงระบบการศึกษา โดยผู้เรียนสามารถเรียนได้ฟรีจากระบบการศึกษาที่เรียกว่า MOOCs (Massive Online Open Courses) จึงส่งผลให้ต้นทุนค่าใช้จ่ายในการเรียนน้อยลง ผู้เรียนสามารถมีทุนวิจัยของตนเอง" "ขณะเดียวกันสถาบันการศึกษาก็ไม่จำเป็นต้องจ้างผู้สอนจำนวนมากเหมือนแต่ก่อน ไม่ต้องสร้างห้องเรียนหรืออาคารเรียน เพราะสามารถใช้เทคโนโลยีมาเป็

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์