ใช้ Font สวยๆ บนเว็บไซต์ด้วย Google Web Fonts

ใช้ Font สวยๆ บนเว็บไซต์ด้วย Google Web Fonts

Google Web Fonts เป็นบริการ Font แบบ Open source จาก Google เปิดให้ผู้พัฒนาเว็บไซต์สามารถเอา Font เหล่านี้ไปใช้งานบนเว็บเพจได้ง่าย รวดเร็ว และไม่มีค่าใช้จ่าย

Apr 28, 2014

แก้ไขล่าสุด มีผู้อ่าน 16,992  |  FONT

Google Web Fonts

เป็นบริการ Font แบบ Open source จาก Google เปิดให้ผู้พัฒนาเว็บไซต์สามารถเอา Font เหล่านี้ไปใช้งานบนเว็บเพจได้ง่าย รวดเร็ว และไม่มีค่าใช้จ่าย  

 

Linkhttps://www.google.com/fonts เข้าไปเลือก Font ที่ต้องการที่นี้ครับ


 

ตัวอย่างการใช้งาน Google Web Fonts

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

ขั้นตอนการใช้งาน Google Web Fonts

1. เพิ่ม stylesheet link อ้างอิงไปที่ Web fonts ที่ต้องการ สามารถทำได้ 3 วิธี

- Standard

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

- @import

@import url(http://fonts.googleapis.com/css?family=Tangerine);

- Javascript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Tangerine::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

 

2. กำหนด Font ผ่านทาง CSS

font-family: 'Tangerine', serif;

หรือ

<div style="font-family: 'Tangerine', serif;">Making the Web Beautiful!</div>

ผลลัพธ์

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย