Cdr.Boonruang Kerdaroondej RTN.Ph.D.

บทท�� 5 บทท�� 5ตั�วอั�กษรและร�ปแบบตั�วอั�กษร

(Character and Fonts)

ขอบเขตการบรรยาย• เร�องทั่��วไปเก��ยวก�บต�วอ�กษรและชุ�ดอ�กษร• มาตรฐานของต�วอ�กษร• ร�ปแบบและล�กษณะของต�วอ�กษร• การใชุ งานต�วอ�กษรและร�ปแบบต�วอ�กษรใน

Multimedia• เคร�องมอสำ$าหร�บสำร างและแก ไขร�ปแบบของต�ว

อ�กษร• ร�ปแบบของต�วอ�กษรทั่��ใชุ บน Web

เร��อังท��วไปเก��ยวก�บตั�วอั�กษรและชุ�ดตั�วอั�กษร

ในอด�ตสำ�งคมของมน�ษย& ได ม�การใชุ ข อความหรอต�วอ�กษรเป'นภาษาสำ�อกลางต)ดต*อระหว*างก�นโดยผ่*านการอ*านหรอบ�นทั่-กเร�องราวต*างๆ ต*อมาได ม�การน$าต�วอ�กษรมาประย�กต&ใชุ ร*วมก�บคอมพิ)วเตอร&ด วยกระบวนการเร�ยบเร�ยง ประมวลผ่ล และน$ามาใชุ งาน ในการจั�ดทั่$าสำ�อสำ)งพิ)มพิ&และโฆษณาต*างๆ เชุ*น รายงาน โบชุ�วร& แบบฟอร&ม หน�งสำอ และพิจันาน�กรม เป'นต น หรอแม แต*การสำ�อสำารด วยข อความทั่��เป'นเทั่3กซ์& (Text Messaging ) และเผ่ยแพิร*ผ่*านระบบเครอข*ายอ)นเตอร&เน3ตในร�ปแบบภาษาเอ3ชุทั่�เอ3มแอล(HTML:Hypertext Markup Language )ซ์-�งป5จัจั�บ�นก$าล�งได ร�บความน)ยมใชุ งานอย*างแพิร*หลาย

แสดงข้�อัความหร�อัตั�วอั�กษรท��นำ!ามา ประย�กตั"ใชุ�ในำร�ปแบบเท$กซ์" ส!าหร�บใชุ�

ตั&ดตั'อัส��อัสาร

ภาพแสดงกลไกการท!างานำข้อังภาษา HTML ท��เป+นำร�ปแบบมาตัรฐานำ

ในการต)ดต*อสำ�อสำารข อม�ล ม�กจัะเก)ดป5ญหาเก��ยวก�บต�วอ�กษรหรอข อความทั่��ปลายทั่างไม*สำามารถแสำดงผ่ลได อย*างถ�กต อง ทั่�8งน�8เน�องจัากร�ปแบบและค�ณล�กษณะของต�วอ�กษรม�ความแตกต*างก�นน�8นเอง เพิ�อเป'นการแก ไข

ป5ญหาเป'นในแนวทั่างเด�ยวก�นได อย*างม�ประสำ)ทั่ธิ)ผ่ล จั-งม�การก$าหนดมาตราฐานของต�วอ�กษรข-8น โดยแบ*งมาตรา

ฐานต�วอ�กษรออกเป'น 2 ชุน)ด คอ แอสำก�(ASCII)และย�น)โค ด(Unicode)

มาตัรฐานำ (Standard ) ข้อังตั�วอั�กษร

แอัสก� (ASCII)แอสำก� (ASCII ย*อมาจัาก American Standard

Code for Information Interchange) พิ�ฒนาเม�อ ค.ศ.1970 แอสำก� เป'นรห�สำขนาด 7 บ)ต รองร�บต�ว

อ�กษร(a-z ทั่�8งต�วพิ)มพิ&เล3กต�วพิ)มพิ&ใหญ* ) ต�วเลข - (0 9)และ สำ�ญล�กษณ&พิ)เศษต*างๆ ได 128 รห�สำ (Code Point) ประกอบข-8นด วยต�ว 95 ต�วอ�กษร ม�ค*าแบ*งเป'น - 031 และ - 0127 รห�สำแอสำก�พิ�ฒนาข-8นมาเพิ�อรองร�บภาษาอ�งกฤษ ซ์-�งม�การใชุ งานอย*างแพิร*หลาย

ในการใชุ งาน ข อม�ล 1 byte = 8 bits ระบบจัะใชุ 1 bit เป'น Parity Bit เพิ�อตรวจัสำอบ (Odd/Even

Parity Checking)

แสำดงตารางรห�สำ ASCII

ย�นำ&โค�ด (Unicode)ย�น)โค ดเป'นรห�สำทั่��พิ�ฒนาข-8นเพิ�อใชุ

งานทั่��เป'นสำากล โดยองค&กรก$าหนดมาตรฐานสำากล (ISO: International

Organization for Standardization) เน�องจัาก

คอมพิ)วเตอร&ในป5จัจั�บ�นได ม�ผ่� ใชุ งานหลายชุนชุาต) โดยผ่� พิ�ฒนาคอองค&กรมาตราฐานสำากลหรอไอเอสำโอ เพิ�อรองร�บต�วอ�กษรและสำ�ญล�กษณ&ต*าง ๆ ของแต*ละภาษา

ต�วอย*างเชุ*น Code Point เป'นต น เชุ*น CJK เป'นมาตรฐาน Unicode ของ 3

ประเทั่ศ คอ Chinese , Japan , Korean

แสดงย�นำ&โค�ด (Unicode ) ข้อังตั�วอั�กษรภาษาไทย

น86

สำามารถจั�ดแบ*งได เป'น 3 ระด�บ ได แก*• ประเภทั่(Category)

1. Serif: อ�กษรจัะม�เสำ นคล ายๆ ข�ด-เหล��ยม 2 . Sans-Serif: ม�ร�ปร*างมนกลม และด�สำวยงาม 3. Monospaced: บางคร�8งเร�ยกว*า

Typewriter Font เน�องจัากเป'นต�วอ�กษรทั่��ใกล เค�ยงก�บเคร�องพิ)มพิ&ด�ด

4 . Script: เป'นแหล*งรวบรวมของแบบอ�กษรทั่�กชุน)ดทั่��ม�ล�กษณะพิ)เศษต*างๆ

5.3 ร�ปแบบและล�กษณะข้อังตั�วอั�กษร

ร�ปแบบและล�กษณะข้อังตั�วอั�กษร• ตระก�ล(Family)

เป'นหมวดทั่��ย*อยลงไปจัาก Category แต*ต�วอ�กษรทั่��อย�*ในตระก�ลเด�ยวก�น จัะม�บรรพิบร�ษร*วมก�นด�งตาราง

แสดงความส�มพ�นำธ์"ระหว'าง Category และ Family

Category FamilySerif Times, Century Schoolbook,

Garamond

Sans-Serif Helvetica, Arial, Verdana

Monospaced

Courier , Courier New

Decorative Whimsy, Arribal, Bergell

ร�ปแบบและล�กษณะข้อังตั�วอั�กษร

• ชุ�อเฉพิาะ (Face)เป'นต�วอ�กษรทั่��สำามารถแสำดงความสำ�มพิ�นธิ&ระหว*าง

Family และ Face ทั่��เราพิบเห3นบ*อยๆ ด�งตาราง

แสดงความส�มพ�นำธ์"ระหว'าง Family และ Face

Family FaceTimes Roman, Italic

Arial Regular, Bold, Italic

Courier Regular, Oblique

Whimsy Regular, Bold

ร�ปแบบและล�กษณะข้อังตั�วอั�กษร

• การจั�ดวางต$าแหน*ง(Alignment)เป'นการก$าหนดว)ธิ�การเร�ยงของต�วอ�กษรหรอข อความในแต*ละย*อหน า ว*าต องการให ชุ)ดซ์ าย หรอชุ)ดขวา หรอต$าแหน*งอ�นๆ

• เสำ นขอบ(Borders)เป'นการก$าหนดขอบสำ นว*าต องการล�กษณะแบบใด

• ขนาดของต�วอ�กษร(Font Size)

ร�ปแบบและล�กษณะข้อังตั�วอั�กษร• สำ�(Colors)• ต�วอ�กษรหรอข อความ(Text)

แสดงโครงสร�างตั�วอั�กษรภาษาอั�งกฤษ

5.4 การใชุ�งานำตั�วอั�กษรและร�ปแบบตั�วอั�กษรในำม�ลตั&ม�เด�ย

• ม�ว)ธิ�การด�งน�8– ต�วอ�กษรเล3กเม�อใชุ ต องชุ�ดเจัน– ข อความทั่��เน นต องแตกต*างจัากข อความอ�น– จั�ดชุ*องว*างบรรทั่�ดให เหมาะสำม อ*านง*าย– จั�ดขนาดต�วอ�กษรตามความสำ$าค�ญของข อความ– ห�วข อทั่��ใชุ ต�วอ�กษรขนาดใหญ*ต องเว นชุ*องไฟให ร� สำ-ก

ไม*ต)ดข�ด– จั�ดสำ�ข อความให อ*านง*าย– ควรใชุ ว)ธิ�การ Anti-aliasing ก�บห�วข อทั่��เป'น

อ�กษรกราฟฟ?กขนาดใหญ*

การนำ!าร�ปแบบตั�วอั�กษรมาประย�กตั"ใชุ�ในำม�ลตั&ม�เด�ย

เมนำ�นำ!าทาง(Menus for Navigation)เป'นการสำร างรายการให เลอกแบบเมน�ควรวางต$าแหน*งบนจัอภาพิให ง*ายต*อการมองเห3นและน*าสำนใจั และควรทั่$าการเชุ�อมโยงในแต*ละหน าให สำ�มพิ�นธิ&ก�นและสำามารถกล�บมาเร)�มต นทั่��จัอภาพิหล�กได

ป�1มกดโตั�ตัอับ(Button for Interaction)ป�@มกด(Button) เป'นกล*องข อความแบบ 3 ม)ต)สำ$าหร�บ

สำร างเหต�การณ&ใดเหต�การณ&หน-�งเม�อคล)กเมาสำ&ทั่��ป�@มกด การออกแบบบนเว3บน�8น ข อความและกราฟฟ?กสำามารถใชุ เป'นป�@มกดได

แสำดงต�วอย*างเว3บไซ์ต&ทั่��ม�สำ*วนประกอบของ Menus for Navigation และ

Button for Interaction

การจั�ดวางข้�อัความส!าหร�บการอั'านำ(Field for Reading) จั�ดวางข อความทั่��สำ$าค�ญๆ แต*ละห�วข อให อย�*ใน

จัอภาพิเด�ยวก�น แบ*งเน8อความอธิ)บายเป'นสำ*วนๆ แยกย*อยก�นไป

แต*ละย*อหน า ใชุ ต�วอ�กษรทั่��อ*านง*าย เชุ�อมโยงความสำ�มพิ�นธิ&ของข อความให ง*ายต*อการ

เข าถ-งข อม�ลการก!าหนำดร�ปแบบข้อังเอักสาร(Format

Document)การก$าหนดร�ปแบบของเอกสำารสำามารถจั�ดทั่$าได ทั่� 8งทั่��เป'นแบบแนวต�8ง

(Portrait)และแบบแนวนอน(Landscape) เพิ�อประโยชุน&สำ$าหร�บการพิ)มพิ&ออก

ทั่างเคร�องพิ)มพิ& และการจั�ดทั่$าเอกสำารให อย�*ในร�ปแบบไฟล&เอกสำาร

อ)เล3กทั่รอน)กสำ& เป'นต น

เอักสารภาษา HTMLเอกสำารภาษา HTML จัะเป'นการน$าข อความหรอต�วอ�กษรใสำ*ลงไปในแต*ละหน าเอกสำาร(Web Page) โดยเร�ยกหน าแรกว*า Home Page รวมเร�ยกว*า Web Site

แสดงข้�อัความด�วยภาษา HTML Notepad

สำ�ญล�กษณ&และภาพิสำ�ญล�กษณ&(Symbols and Icons)

• สำ�ญล�กษณ&เป'นการสำร างภาพิแทั่นข อความต*างๆ

แสดงส�ญล�กษณ"ในำร�ปแบบตั'างๆ ตัาม ว�ตัถุ�ประสงค"การใชุ�งานำ

5.5 เคร��อังม�อัส!าหร�บสร�างและแก�ไข้ร�ปแบบข้อังตั�วอั�กษร• ป5จัจั�บ�นม�เคร�องมอสำ$าหร�บสำร างและแก ไขต�ว

อ�กษรโดยเฉพิาะมากมายให เลอกตามความเหมาะสำม

แสดงการปร�บแตั'งข้�อัความด�วยโปรแกรม Photoshop

5.6 ร�ปแบบข้อังตั�วอั�กษรท��ใชุ�บนำเว$บ

Cascading Style Sheet(CSS) ม�ร�ปแบบการใชุ�งานำ ด�งนำ�6

Inline CSS การก$าหนดร�ปแบบของต�วอ�กษรให ก�บข อความวรรคตอน ย*อหน า Embeded CSS การก$าหนดร�ปแบบของต�วอ�กษรให ก�บเว3บเพิจัในแต*ละหน าLink CSS การก$าหนดร�ปแบบของต�วอ�กษรให ก�บเว3บเพิจัทั่�8งหมด

Imported Text(Txt) เป'นเทั่3กซ์&ไฟล&ทั่��น$าเข าข อม�ลมาจัากโปรแกรม Editor เชุ*น NotePad

Portable Document Format (PDF) เป'นไฟล&เอกสำารอ)เล3กทั่รอน)กสำ& ค�ณล�กษณะทั่��โดดเด*น สำน�บสำน�นมาตรฐานการบ�บอ�ดข อม�ลต*างๆ

รองร�บการทั่$างานร*วมก�บระบบปฏิ)บ�ต)การอ�นๆ ได อย*างเป'นอ)สำระสำามารถแปลงร�ปภาพิ ข อความให อย�*ในร�ปแบบเอกสำารอ)เล3กทั่รอน)กสำ&(.pdf)

ได เหมอนต นฉบ�บจัร)ง