SlideShare a Scribd company logo
1 of 15
Download to read offline
รหัส13510253
GOOGLE
 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 สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ

More Related Content

Similar to Google web font1

Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]pom_2555
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dreamsommat
 
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flashการทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flashAugusts Programmer
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์sommat
 
รายงาน window
รายงาน windowรายงาน window
รายงาน windowNooLuck
 
คู่มือการใช้ Sony vegas 7
คู่มือการใช้  Sony vegas 7คู่มือการใช้  Sony vegas 7
คู่มือการใช้ Sony vegas 7Vinz Primo
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6arachaporn
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6arachaporn
 
นำเสนอ
นำเสนอนำเสนอ
นำเสนอbangfa
 
คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3wanida401
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 

Similar to Google web font1 (15)

Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
 
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flashการทำ ลิ้งค์ และ เมาส์ Hover จาก flash
การทำ ลิ้งค์ และ เมาส์ Hover จาก flash
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
Lesson1
Lesson1Lesson1
Lesson1
 
รายงาน window
รายงาน windowรายงาน window
รายงาน window
 
คู่มือการใช้ Sony vegas 7
คู่มือการใช้  Sony vegas 7คู่มือการใช้  Sony vegas 7
คู่มือการใช้ Sony vegas 7
 
Dream cs3
Dream cs3Dream cs3
Dream cs3
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
 
หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6หน่วยการเรียนรู้ที่ 6
หน่วยการเรียนรู้ที่ 6
 
0123
01230123
0123
 
นำเสนอ
นำเสนอนำเสนอ
นำเสนอ
 
คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3คู่มือการใช้ Dream cs3
คู่มือการใช้ Dream cs3
 
Chapter4
Chapter4Chapter4
Chapter4
 

Google web font1

  • 1. รหัส13510253 GOOGLE 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 สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ