fonts css
DESCRIPTION
font typographyTRANSCRIPT
Pixel
Unit Style Sheet
px (pixels, สัมพันธกับคาความละเอียดของหนาจอ) เชน 1px, 4px
em (emphasize, ความสูงของตัวอักษร) เปนขนาดจำนวนเทาของขนาด font ที่กำหนดให body ถา font ที่ body กำหนดเปน 10px
h1{font-size:1.5em} h1 จะมีขนาดเปน 1.5 เทา ของ 10px = 15px
em
ex (x-height, ความสูงของตัวอักษร "x") เชน 1.5ex, 2ex
Unit Style Sheet
ex
ex (x-height, ความสูงของตัวอักษร "x") เชน 1.5ex, 2ex
% (percent, สัมพันธกับขนาดหนาจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู) เชน 50%, 130%
Percent
Unit • in (inches; 1in=2.54cm =72pt =6pc) เชน 2in, 1.5in • cm (centimeters; 1cm=10mm) เชน 2cm, 1.11cm • mm (millimeters) เชน 50mm, 0.8mm
• pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เปนหนวยที่ใชในงานสิ่งพิมพเชน 12pt, 20pt
• pc (picas; 1pc=12pt) เชน 1pc, 2pc
p.ex1 { font:15px arial,sans-serif; /*not specified */ }
CSS - Fonts
Property Description Values
font-family ใชกำหนดชนิด font ที่ตองการจะใหแสดงผล
โดยที่ font นั้นจะตองมีอยูในเครื่องของผูใชงานดวย
โดยที่ font นั้นจะตองมีอยูในเครื่องของผูใชงานดวย
!เชน Arial, Helvetica, sans-serif
font-size ใชกำหนดขนาดของตัวอักษร ที่จะใหแสดงผล /td
xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, 18px, 70%, 150%
Property Description Values
font-style ใชกำหนดรูปแบบของตัวอักษรในลักษณะตางๆ
normal italic
oblique เอียง 45 องศา
font-variant
ใชแปลงตัวอักษรที่เปนตัวพิมพเล็กใหเปนพิมพใหญ
โดยที่ขนาดตัวอักษรยังคงเทาตัวพิมพเล็ก
normal Small-Caps
font-weight ใชกำหนดความหนาของตัวอักษร
normal bold
bolder lighter
100
200
Property Description Values
color ใชกำหนดสีใหตัวอักษร red #000099
font สามารถกำหนด property ใหกับ font ไดในคำสั่งประกาศเดียว
font-style
font-variant font-weight font-size
font-family
Font > sans-serif, Arial
<p style="font-weight:bold">Love me Love my dog</p>
<p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
Example <html> <head> <style type="text/css"> .p1 { color:#FF0033; line-height:18pt; letter-spacing:0.05cm; text-decoration:overline; text-indent:0.5in; text-transform:capitalize; white-space:normal; word-spacing:0.5em; } </style> </head> <body> <p class="p1">good moring teacher, how are you today?</p> </body> </html>
LAB#6 Fonts
จุดประสงค ศึกษาพัฒนาการเรียนรู การจัดออกแบบตัวอักษรโดยใช CSS จากเนื้อหาที่ใหมา ใหนักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช CSS Font text
ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให
“ออกแบบเว็บเพจอยางไรใหดูด”ี6
รูปแบบการส่งงาน
การส่งงาน : อัด zip หรือ rar ส่ง ทําได้โดย คลิกขวาที่ folder > winzip > Add to "ชื่อโฟลเดอร์.zip" หรือ คลิกขวาที่ folder > Add to "ชื่อโฟลเดอร์.rar"
**กรณีมีรูปภาพหรือกราฟิกอื่นให้ใส่มาใน folder งานด้วย โดยไม่ต้อง zip ไม่งั้นรูปภาพหรือกราฟฟิกจะไม่แสดง**