โหลดฟ้อนเจ๋ง ๆ จาก google fonts มาใช้ในเว็บของเรากัน

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

โหลดฟ้อนเจ๋ง ๆ จาก google fonts มาใช้ในเว็บของเรากัน

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

ในการทำเว็บไซต์ให้สวยงานและไม่เหมือนใครก็จำเป็นจะต้องมีฟ้อนสวย ๆ มาใช้งานกันบ้างอะไรบ้างวันนี้เราก็มีวิธีการเรียกใช้ฟ้อนจาก google มาฝากกันอีกทั้ง google fonts นั้นมีหลากลายภาษาให้เราได้เลือกใช้กันหนึ่งในนั้นแน่นอนก็ต้องมีภาษาไทยด้วย

อันดับแรกให้เราค้นหาคำว่า google font แล้วก็เลือกผลการค้นหาอันดับแรกได้เลย
Selection_777.png
Selection_777.png (32.6 KiB) Viewed 1552 times
เมือเราเข้ามาแล้วเราก็จะสามารถสามารเลือกฟ้อนที่มีอยู่มากมายได้แต่ถ้าเราต้องการที่ฟ้อนเป็นภาษาไทยด้วยก็ให้เลือกเป็นภาษาไทย
Selection_778.png
Selection_778.png (42.01 KiB) Viewed 1552 times
เมือเราเลือกฟ้อนที่ถูกใจได้แล้วเราก็ทำการคลิกเครื่องหมาย + ได้เลย
Selection_779.png
Selection_779.png (54.39 KiB) Viewed 1552 times
ซึ่งเราก็สามารถเลือกฟ้อนได้หลายตัวตามที่เราต้องการได้ถ้าเราเลือกฟ้อนพอแล้วก็ให้คลิกที่มุมขวาล่าง
Selection_780.png
Selection_780.png (46.75 KiB) Viewed 1552 times
เมือคลิกเข้ามาแล้วเราก็จะเห็นโค้ดที่เราต้องนำไปใช้
1. นำฟ้อนนี้ไปใส่ตรง head ของเรา
2. นำไปใส่ที่ css ของเรา
Selection_781.png
Selection_781.png (43.14 KiB) Viewed 1552 times
โค้ดนี้ก็จะเป็นตัวอย่างในการเรียกใช้งานฟ้อนจาก google fonts

หน้าเว็บของเรา

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="../test/css.css">

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Charm&display=swap" rel="stylesheet">
  </head>
  <body>
  <h1>เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
  <h1 class="fonttest">เครื่องมือและอุปกรณ์ทั้งหมดของพวกเขาพร้อมสำหรับการใช้งานแล้ว </h1>
  </body>
</html>
หน้า css

โค้ด: เลือกทั้งหมด

.fonttest{
  font-family: 'Charm', cursive;
}
ผลลัพธที่ได้
Selection_782.png
Selection_782.png (24.27 KiB) Viewed 1552 times

เป็นอย่างไรบ้างครับสำหรับการวิธีการเรียกใช้ font ใน google font ไม่อยากอย่าที่คิดใช้ไหมแถมยังทำให้เว็บไซต์ที่เราพัฒนาอยู่มีความเท่มีความเป็นตัวของตัวเองมากยิ่งขึ้นอีกด้วยหวังว่าจะเป็นบทความที่ผู้เข้ามาอ่านจะได้ประโยชน์ไปใช้งานกันไม่มากก็น้อยนะครับและทางผู้เขียนบทความนี้ก็หวังเป็นอย่างยิ่งว่าจะผู้ที่ได้รับความรู้นี้จะนำไปส่งต่อความรู้ให้กับผู้ที่สนใจเหมือนกับเราได้รับความรู้นี้ไปด้วย
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 74