google web font1

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

Upload: siriwan-tongkleng

Post on 28-May-2015

573 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Google web font1

web fontGOOGLE

รหัส13510253

นำ�เสนอ

วิช�สัมมน�

น�งส�วสิริวรรณ ทองเกลี้ยง

อ�จ�รย์อรวรรณ ประพฤติดี

Page 2: Google web font1

google web font

ใช้ font สวยๆ บนเว็บได้ง่ายๆ ด้วย Google web fontsสำาหรับคนทำาเว็บแล้ว จะใส่ font สวยๆ ลงเว็บถือว่าเป็นเรื่องที่น่าเบื่อมาก เพราะเราไม่

สามารถใส่มันลงไปได้ตรงๆ ต้องแปลงเป็นรูปภาพก่อน หรือไม่ก็ใช้ Flash ช่วย แต่ด้วย

เทคโนโลยีในปัจจุบัน ที่ออกมาช่วยให้เราสามารถฝังฟอนต์ที่เราต้องการลงไปบนหน้าเว็บ

ได้เลย

Page 3: Google web font1

google web font

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

จัดการโหลดมาให้โดยอัตโนมัติเลย

ส่วน Google web fontsสำาหรับวิธีการข้างบนนั้น อาจจะดูยุ่งยากไปหน่อยสำาหรับคนที่เขียน blog ชาวบ้าน ๆ ทั้ง

การหา font ทั้งการแปลง font และไหนจะต้องหาที่ฝากไฟล์ font อีก Google เลยใจดี

จัดที่ให้เราสามารถเรียก font ไปใช้ได้ทันทีโดยไม่ต้องแปลงเอง ไม่ต้องฝากไฟล์ font เอง

Page 4: Google web font1

google web font

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

Page 5: Google web font1

google web font

Page 6: Google web font1

google web font

Page 7: Google web font1

google web font

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

ปุ่มที่มีเล้นประสีแดง

Page 8: Google web font1

google web font

Page 9: Google web font1

google web font

เมื่อเข้ามายังหน้านี้จะเห็น ส่วนที่ 3 และส่วนที่ 4 ส่วนที่ 3 คือส่วนที่เราจะต้อง

copy ไปแปะ ที่หน้า html ส่วนส่วนที่ 4 จะ copy ไปแปะที่ css ของตัวหนังสือที่เรา

ต้องการ

Page 10: Google web font1

google web font

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

Page 11: Google web font1

google web font

แล้ว copy ลิงค์

Page 12: Google web font1

google web font

แล้วเอามาแปะไว้ที่ ระหว่าง <head>...</head>

จากนั้นก็สร้างคลาสคลุม ตัวอักษร

Page 13: Google web font1

google web font

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

Page 14: Google web font1

google web font

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

Page 15: Google web font1

google web font

จากนั้นเราก็จะได้ font สวยๆ โดยที่ไม่ต้องตัดเป็นภาพ