SlideShare a Scribd company logo
1 of 16
Download to read offline
รหัส13510253
   GOOGLE
GOOGLE font
       web
              น�งส�วสิริวรรณ ทองเกลี้ยง
              นำ�เสนอ
 web font     อ�จ�รย์อรวรรณ ประพฤติดี
              วิช�สัมมน�
google web font




ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fonts
    สำาหรับคนทำาเว็บแล้ว จะใส่ font สวยๆ ลงเว็บถือว่าเป็นเรื่องที่น่าเบื่อมาก เพราะเราไม่
    สามารถใส่มันลงไปได้ตรงๆ ต้องแปลงเป็นรูปภาพก่อน หรือไม่ก็ใช้ Flash ช่วย แต่ด้วย
    เทคโนโลยีในปัจจุบัน ที่ออกมาช่วยให้เราสามารถฝังฟอนต์ที่เราต้องการลงไปบนหน้าเว็บ
    ได้เลย
google web font




รู้จักกับ webfont
    ก็คือการเอาไฟล์ font ติดไปกับหน้าเว็บเพจด้วย ถ้าเครื่องของผู้ชมไม่มี font นั้น มันก็จะ
    จัดการโหลดมาให้โดยอัตโนมัติเลย

ส่วน Google web fonts
    สำาหรับวิธีการข้างบนนั้น อาจจะดูยุ่งยากไปหน่อยสำาหรับคนที่เขียน blog ชาวบ้าน ๆ ทั้ง
    การหา font ทั้งการแปลง font และไหนจะต้องหาที่ฝากไฟล์ font อีก Google เลยใจดี
    จัดที่ให้เราสามารถเรียก font ไปใช้ ได้ทันทีโดยไม่ต้องแปลงเอง ไม่ต้องฝากไฟล์ font เอง
google web font




    นี่คือหน้าแรก ของ google web font
google web font
google web font
google web font




    หน้านี้มีให้เลือกว่าจะเลือกแบบใหน และเราสามารถเอา ลิงค์ของ font โดยคลิกไปที่
    ปุ่มที่มีเล้นประสีแดง
google web font
google web font




    เมื่อเข้ามายังหน้านี้จะเห็น ส่วนที่ 3 และส่วนที่ 4 ส่วนที่ 3 คือส่วนที่เราจะต้อง
    copy ไปแปะ ที่หน้า html ส่วนส่วนที่ 4 จะ copy ไปแปะที่ css ของตัวหนังสือที่เรา
    ต้องการ
google web font




    ก่อนอื่นให้พิม ตัวหนังสือ
google web font




    แล้ว copy ลิงค์
google web font




    แล้วเอามาแปะไว้ที่ ระหว่าง <head>...</head>
    จากนั้นก็สร้างคลาสคลุม ตัวอักษร
google web font




จากนั้นก็ copy ส่วนของ font-family
google web font




             แล้วแล้วเอามาแปะที่ css
google web font




     จากนั้นเราก็จะได้ font สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ
รหัส13510253
   GOOGLE
GOOGLE font
       web
              น�งส�วสิริวรรณ ทองเกลี้ยง
              นำ�เสนอ
 web font     อ�จ�รย์อรวรรณ ประพฤติดี
              วิช�สัมมน�

More Related Content

Similar to Google web font2

คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
sommat
 
Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]
pom_2555
 
รายงาน window
รายงาน windowรายงาน window
รายงาน window
NooLuck
 
Chapter4
Chapter4Chapter4
Chapter4
aumtall
 
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flashการทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
Augusts Programmer
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
NooCake Prommali
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
arachaporn
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
arachaporn
 

Similar to Google web font2 (20)

คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
 
Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
รายงาน window
รายงาน windowรายงาน window
รายงาน window
 
Chapter4
Chapter4Chapter4
Chapter4
 
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flashการทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
 
คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บกระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
 
MTE-SEO present
MTE-SEO presentMTE-SEO present
MTE-SEO present
 
Dream cs3
Dream cs3Dream cs3
Dream cs3
 
PHP & Dreamweaver ch04 basic_html
PHP & Dreamweaver  ch04 basic_htmlPHP & Dreamweaver  ch04 basic_html
PHP & Dreamweaver ch04 basic_html
 
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
 
Namo webeditor 6
Namo webeditor 6Namo webeditor 6
Namo webeditor 6
 
Lesson1
Lesson1Lesson1
Lesson1
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
 

Google web font2

  • 1. รหัส13510253 GOOGLE GOOGLE font web น�งส�วสิริวรรณ ทองเกลี้ยง นำ�เสนอ web font อ�จ�รย์อรวรรณ ประพฤติดี วิช�สัมมน�
  • 2. google web font ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fonts สำาหรับคนทำาเว็บแล้ว จะใส่ font สวยๆ ลงเว็บถือว่าเป็นเรื่องที่น่าเบื่อมาก เพราะเราไม่ สามารถใส่มันลงไปได้ตรงๆ ต้องแปลงเป็นรูปภาพก่อน หรือไม่ก็ใช้ Flash ช่วย แต่ด้วย เทคโนโลยีในปัจจุบัน ที่ออกมาช่วยให้เราสามารถฝังฟอนต์ที่เราต้องการลงไปบนหน้าเว็บ ได้เลย
  • 3. google web font รู้จักกับ webfont ก็คือการเอาไฟล์ font ติดไปกับหน้าเว็บเพจด้วย ถ้าเครื่องของผู้ชมไม่มี font นั้น มันก็จะ จัดการโหลดมาให้โดยอัตโนมัติเลย ส่วน Google web fonts สำาหรับวิธีการข้างบนนั้น อาจจะดูยุ่งยากไปหน่อยสำาหรับคนที่เขียน blog ชาวบ้าน ๆ ทั้ง การหา font ทั้งการแปลง font และไหนจะต้องหาที่ฝากไฟล์ font อีก Google เลยใจดี จัดที่ให้เราสามารถเรียก font ไปใช้ ได้ทันทีโดยไม่ต้องแปลงเอง ไม่ต้องฝากไฟล์ font เอง
  • 4. google web font นี่คือหน้าแรก ของ google web font
  • 7. google web font หน้านี้มีให้เลือกว่าจะเลือกแบบใหน และเราสามารถเอา ลิงค์ของ font โดยคลิกไปที่ ปุ่มที่มีเล้นประสีแดง
  • 9. google web font เมื่อเข้ามายังหน้านี้จะเห็น ส่วนที่ 3 และส่วนที่ 4 ส่วนที่ 3 คือส่วนที่เราจะต้อง copy ไปแปะ ที่หน้า html ส่วนส่วนที่ 4 จะ copy ไปแปะที่ css ของตัวหนังสือที่เรา ต้องการ
  • 10. google web font ก่อนอื่นให้พิม ตัวหนังสือ
  • 11. google web font แล้ว copy ลิงค์
  • 12. google web font แล้วเอามาแปะไว้ที่ ระหว่าง <head>...</head> จากนั้นก็สร้างคลาสคลุม ตัวอักษร
  • 13. google web font จากนั้นก็ copy ส่วนของ font-family
  • 14. google web font แล้วแล้วเอามาแปะที่ css
  • 15. google web font จากนั้นเราก็จะได้ font สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ
  • 16. รหัส13510253 GOOGLE GOOGLE font web น�งส�วสิริวรรณ ทองเกลี้ยง นำ�เสนอ web font อ�จ�รย์อรวรรณ ประพฤติดี วิช�สัมมน�