google web font2
DESCRIPTION
TRANSCRIPT
![Page 1: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/1.jpg)
web fontGOOGLEweb font
GOOGLEรหัส13510253
นำ�เสนอ
วิช�สัมมน�
น�งส�วสิริวรรณ ทองเกลี้ยง
อ�จ�รย์อรวรรณ ประพฤติดี
![Page 2: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/2.jpg)
google web font
ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fontsสำาหรับคนทำาเว็บแล้ว จะใส่ font สวยๆ ลงเว็บถือว่าเป็นเรื่องที่น่าเบื่อมาก เพราะเราไม่
สามารถใส่มันลงไปได้ตรงๆ ต้องแปลงเป็นรูปภาพก่อน หรือไม่ก็ใช้ Flash ช่วย แต่ด้วย
เทคโนโลยีในปัจจุบัน ที่ออกมาช่วยให้เราสามารถฝังฟอนต์ที่เราต้องการลงไปบนหน้าเว็บ
ได้เลย
![Page 3: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/3.jpg)
google web font
รู้จักกับ webfontก็คือการเอาไฟล์ font ติดไปกับหน้าเว็บเพจด้วย ถ้าเครื่องของผู้ชมไม่มี font นั้น มันก็จะ
จัดการโหลดมาให้โดยอัตโนมัติเลย
ส่วน Google web fontsสำาหรับวิธีการข้างบนนั้น อาจจะดูยุ่งยากไปหน่อยสำาหรับคนที่เขียน blog ชาวบ้าน ๆ ทั้ง
การหา font ทั้งการแปลง font และไหนจะต้องหาที่ฝากไฟล์ font อีก Google เลยใจดี
จัดที่ให้เราสามารถเรียก font ไปใช้ได้ทันทีโดยไม่ต้องแปลงเอง ไม่ต้องฝากไฟล์ font เอง
![Page 4: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/4.jpg)
google web font
นี่คือหน้าแรก ของ google web font
![Page 5: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/5.jpg)
google web font
![Page 6: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/6.jpg)
google web font
![Page 7: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/7.jpg)
google web font
หน้านี้มีให้เลือกว่าจะเลือกแบบใหน และเราสามารถเอา ลิงค์ของ font โดยคลิกไปที่
ปุ่มที่มีเล้นประสีแดง
![Page 8: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/8.jpg)
google web font
![Page 9: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/9.jpg)
google web font
เมื่อเข้ามายังหน้านี้จะเห็น ส่วนที่ 3 และส่วนที่ 4 ส่วนที่ 3 คือส่วนที่เราจะต้อง
copy ไปแปะ ที่หน้า html ส่วนส่วนที่ 4 จะ copy ไปแปะที่ css ของตัวหนังสือที่เรา
ต้องการ
![Page 10: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/10.jpg)
google web font
ก่อนอื่นให้พิม ตัวหนังสือ
![Page 11: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/11.jpg)
google web font
แล้ว copy ลิงค์
![Page 12: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/12.jpg)
google web font
แล้วเอามาแปะไว้ที่ ระหว่าง <head>...</head>
จากนั้นก็สร้างคลาสคลุม ตัวอักษร
![Page 13: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/13.jpg)
google web font
จากนั้นก็ copy ส่วนของ font-family
![Page 14: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/14.jpg)
google web font
แล้วแล้วเอามาแปะที่ css
![Page 15: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/15.jpg)
google web font
จากนั้นเราก็จะได้ font สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ
![Page 16: Google web font2](https://reader034.vdocuments.net/reader034/viewer/2022051323/5484157c5906b585158b4725/html5/thumbnails/16.jpg)
web fontGOOGLEweb font
GOOGLEรหัส13510253
นำ�เสนอ
วิช�สัมมน�
น�งส�วสิริวรรณ ทองเกลี้ยง
อ�จ�รย์อรวรรณ ประพฤติดี