คลังเก็บบล็อก

ใส่ฟอนต์สวยๆให้เว็บ


Css 3 ยอมให้กำหนด font เพิ่มได้เองนอกจากที่มีอยู่แล้ว ทำให้สามารถออกแบบหน้าเว็บสวยๆ หรือจะเล่น typography อักษรศิลป์ได้มากขึ้น แต่ก็ยังเจอกับปัญหาเดิมคือ แต่ละ browser มันรับชนิดตัวอักษรได้ไม่เท่ากัน ถ้าดูจาก http://caniuse.com/fontface จะเห็นว่าตั้งแต่ ie8 มันก็ใช้ font-face ได้แล้ว แต่เฉพาะ Embedded OpenType (EOT) แต่ก็ไม่มีเจ้าอื่นๆ ที่รับนามสกุลนี้เท่าไหร่เลย ที่มีความหวังที่สุดคือ True Type (TTF) และ OpenType (OTF) ก็ยังไม่ครบทุกบราวเซอร์

ปัญหานี้แก้ได้ง่ายๆ โดยไปที่เว็บ Convert Fonts upload ไฟล์ fonts ที่เราต้องการใช้ หรือเข้าไปหาฟอนต์ที่เคยลงไว้ใน C:\Windows\Fonts เสร็จแล้วกด get @font-face จะได้ไฟล์ zip
สมมุติจะแปลง THSarabunNew เป็นนามสกุลอื่นๆ ภายในจะมีไฟล์ตามนี้
thsarabunnew.css
เป็นตัวอย่าง css ให้เอาไปแปะในไฟล์ css สาเหตุที่มันทำงานได้ทุกๆ บราวเซอร์
เพราะพี่แกเล่นเขียน css แบบนี้มาให้เลย

@font-face {
    font-family: 'THSarabunNewRegular';
    src: url('thsarabunnew.eot');
    src: url('thsarabunnew.eot') format('embedded-opentype'),
         url('thsarabunnew.woff') format('woff'),
         url('thsarabunnew.ttf') format('truetype'),
         url('thsarabunnew.svg#THSarabunNewRegular') format('svg');
}

ต่างจากตัวอย่าง(ในอุดมคติ)ของ w3c เยอะเลย เพื่อให้ browser compatibility มากที่สุด
และมีฟอนต์ที่แปลงมาให้แล้วอีก 4 ตัว

  • thsarabunnew.ttf (TrueType)
  • thsarabunnew.eot (Embedded OpenType)
  • thsarabunnew.svg (Scalable Vector Graphics) เขียนมาเป็น code เลย อันนี้ไม่มีใครขยันทำเองแน่ๆ
  • thsarabunnew.woff (Web Open Font Format)

ตัวอย่างการใช้งาน กำหนดให้ใช้ฟอนต์สารบัญ

body
{
	color:#c00000;
	font-family: 'THSarabunNewRegular', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size: 14px;
}

สังเกต จะมีชื่อฟอนต์อื่นต่อหลัง THSarabunNewRegular อีกที เพื่อถ้าหากโหลดฟอนต์มาไม่ได้ บราวเซอร์จะใช้ตัวถัดๆไปแสดงแทน

Advertisements

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ (ตาราง)


จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

  • ใช้ได้กับทุกบราวเซอร์รวมทั้งไอโฟนด้วย แต่ ie ต้องใช้ DOCTYPE เท่านั้น ถ้าเป็นตัวอื่นจะกำหนดความสูงของแถวไม่ได้
  • ถ้าเนื้อหาน้อยมากๆ ตารางจะพยามชดเชยความสูงของตัวมันเองที่มากกว่าปกติ โดยจะเพิ่มความสูงของ tr ทดแทน ถ้าไม่อยากให้หน้าเว็บดูผิดปกติให้แก้ <tr> ที่มีปัญหาเป็น<tr style=”height:20px;”>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>100% table height</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css3.css">
    <style>
    html
    {
    	height:100%;
    }
    body
    {
    	height:100%;
    	margin: 0px;
    	padding: 0px;
    	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
    }
    table
    {
    	border: 0 none;
    	height:100%;
    }
    td
    {
    	margin: 0px;
    	padding: 0px;
    	vertical-align:top;
    	height:0px;
    }
    #header
    {
    	background:#c00000;
    	height:20px;
    }
    #footer
    {
    	background:#c00000;
    	height:20px;
    }
    </style>
    </head>
    <body>
    <table border="1" class="tablewrapper">
      <tr>
        <td id="header">header</td>
      </tr>
      <tr>
        <td>contents</td>
      </tr>
      <tr>
        <td id="footer">footer</td>
      </tr>
    </table>
    </body>
    </html>
    

    นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
    ดูเพิ่มเติม

%d bloggers like this: