- ข้อความ
- ประวัติศาสตร์
TypefacesEach typeface has a unique
Typefaces
Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of html, web authors had no control over typefaces (“fonts” in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. Modern versions of html and css allow designers to specify typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one typeface may not format correctly in another.
In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user’s machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to display all pages in their favorite font.
Legibility on-screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the typeface.
Adapted traditional typeface
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.
Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.
Typefaces for other media
Much of our attention is focused on the screen version of our pages, but we also have control over how a page looks when printed on paper. Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than the relatively few that are readable and attractive on-screen. In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.
Choosing typefaces
The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Various studies purport to show that serif type is more legible than sans serif type, and vice versa. You can truly judge type legibility only within the context of the situation—on the screen, on paper—as users will see your web page.
You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible, and don’t use more than two typefaces (one serif, one sans serif) on a page.
The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here, differentiated by their effectiveness on-screen and on paper. Remember that many Macintosh users who have installed Microsoft Office will have Windows fonts installed on their systems (fig. 8.9).
Examples of short text blocks of common screen and print fonts. The screen fonts include: Georgia, Lucida Bright, Verdana, Arial, and Trebuchet. The commonly used print fonts shown are: Times New Roman, Times, Arial, and Helvetica.
Figure 8.9 — Common Apple Macintosh and Microsoft Windows screen and print fonts.
Specifying typefaces
You can specify any typeface for your web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user’s computer, the browser will switch to the default font (generally Times New Roman or Times). To increase the chances that the reader will see your preferred typeface, you can specify multiple fonts for each style. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, “Verdana, Geneva, Arial, Helvetica.” As a last-ditch effort you can end your font declaration with a generic font designation such as “serif.” That way, if the browser cannot find any of the listed fonts, it will display the text in an available serif font:
p { font-family: "Times New Roman", Georgia, Times, serif }
Notice that multiword font names such as Times New Roman must appear within quotation marks in your specification. Also note in the font example below that although “Trebuchet” and “Trebuchet ms” are the same typeface, the exact name you specify in the font list matters. If you want both Macintosh and Windows users to see the typeface Trebuchet, then use both names in your font declaration:
p { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif }
A good way to make sure that your type settings are functioning correctly is to set your browser’s default proportional font setting to something that is obviously different from your intended font. For example, set your browser’s default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.
Type size
Scalable text is essential to the goals of universal usability. To ensure scalability, use relative units to control the typography—type size, margins and indents, leading—on the page. Use graphic text sparingly, and always offer a text equivalent. Text rendered to graphic form is no longer text but image and thus cannot be manipulated—enlarged, colored—as plain text can. Graphic text is also invisible to search engines, so without alternate text the most important words on your page may be invisible to search.
With css, designers have many methods for setting type size. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. An em in the web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 16 pixels, than a two-em text indent would be double, or 32 pixels. But if the user used the text zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size:
p { font-size: 1em; text-indent: 2em; }
As you might imagine, this flexibility can send page layouts into disarray. Most web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically designed to accommodate standard or small type. Indeed, at large type sizes a fixed-width column may contain only a few words, which makes the text awkward to read. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes (fig. 8.10). (For more on fixed and flexible layouts, see chapter 7, Page Frameworks.)
Figure 8.10 — Enlarged text can send fixed-width layouts into disarray (left). Flexible “liquid” layouts (right) respond more gracefully when users enlarge text.
Different operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows web browsers will look slightly larger and sometimes lighter in weight than the equivalent face on the Macintosh. This difference in font rendering can affect your page layouts and the overall “type color” of your page.
Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of html, web authors had no control over typefaces (“fonts” in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. Modern versions of html and css allow designers to specify typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one typeface may not format correctly in another.
In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user’s machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to display all pages in their favorite font.
Legibility on-screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the typeface.
Adapted traditional typeface
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.
Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.
Typefaces for other media
Much of our attention is focused on the screen version of our pages, but we also have control over how a page looks when printed on paper. Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than the relatively few that are readable and attractive on-screen. In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.
Choosing typefaces
The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Various studies purport to show that serif type is more legible than sans serif type, and vice versa. You can truly judge type legibility only within the context of the situation—on the screen, on paper—as users will see your web page.
You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible, and don’t use more than two typefaces (one serif, one sans serif) on a page.
The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here, differentiated by their effectiveness on-screen and on paper. Remember that many Macintosh users who have installed Microsoft Office will have Windows fonts installed on their systems (fig. 8.9).
Examples of short text blocks of common screen and print fonts. The screen fonts include: Georgia, Lucida Bright, Verdana, Arial, and Trebuchet. The commonly used print fonts shown are: Times New Roman, Times, Arial, and Helvetica.
Figure 8.9 — Common Apple Macintosh and Microsoft Windows screen and print fonts.
Specifying typefaces
You can specify any typeface for your web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user’s computer, the browser will switch to the default font (generally Times New Roman or Times). To increase the chances that the reader will see your preferred typeface, you can specify multiple fonts for each style. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, “Verdana, Geneva, Arial, Helvetica.” As a last-ditch effort you can end your font declaration with a generic font designation such as “serif.” That way, if the browser cannot find any of the listed fonts, it will display the text in an available serif font:
p { font-family: "Times New Roman", Georgia, Times, serif }
Notice that multiword font names such as Times New Roman must appear within quotation marks in your specification. Also note in the font example below that although “Trebuchet” and “Trebuchet ms” are the same typeface, the exact name you specify in the font list matters. If you want both Macintosh and Windows users to see the typeface Trebuchet, then use both names in your font declaration:
p { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif }
A good way to make sure that your type settings are functioning correctly is to set your browser’s default proportional font setting to something that is obviously different from your intended font. For example, set your browser’s default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.
Type size
Scalable text is essential to the goals of universal usability. To ensure scalability, use relative units to control the typography—type size, margins and indents, leading—on the page. Use graphic text sparingly, and always offer a text equivalent. Text rendered to graphic form is no longer text but image and thus cannot be manipulated—enlarged, colored—as plain text can. Graphic text is also invisible to search engines, so without alternate text the most important words on your page may be invisible to search.
With css, designers have many methods for setting type size. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. An em in the web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 16 pixels, than a two-em text indent would be double, or 32 pixels. But if the user used the text zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size:
p { font-size: 1em; text-indent: 2em; }
As you might imagine, this flexibility can send page layouts into disarray. Most web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically designed to accommodate standard or small type. Indeed, at large type sizes a fixed-width column may contain only a few words, which makes the text awkward to read. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes (fig. 8.10). (For more on fixed and flexible layouts, see chapter 7, Page Frameworks.)
Figure 8.10 — Enlarged text can send fixed-width layouts into disarray (left). Flexible “liquid” layouts (right) respond more gracefully when users enlarge text.
Different operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows web browsers will look slightly larger and sometimes lighter in weight than the equivalent face on the Macintosh. This difference in font rendering can affect your page layouts and the overall “type color” of your page.
0/5000
Typefaces
แต่ละแบบตัวพิมพ์มีเสียงเฉพาะที่ควรเหมาะสมกลมกลืนระหว่างการไหลด้วยวาจา และการแสดงผลของเนื้อหา รุ่นแรกของ html ผู้เขียนเว็บได้ไม่สามารถควบคุม typefaces ("แบบอักษร" ในคำศัพท์ของคอมพิวเตอร์ส่วนบุคคล) แบบอักษรกำหนด โดยเบราว์เซอร์ เพื่อให้หน้าไม่ดูแบบอักษรใดที่ผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขา หรือเธอ Html และ css รุ่นทันสมัยให้นักออกแบบเพื่อระบุแบบตัวพิมพ์ นี้ไม่มีประโยชน์เหตุผลความงามแต่เนื่องจาก มีขนาดแตกต่างกันของ typefaces โครงร่างที่ถูกออกแบบอย่างพิถีพิถันโดยใช้แบบตัวพิมพ์ที่หนึ่งอาจไม่จัดรูปแบบอย่างถูกต้องอีก
ในการระบุ typefaces คุณควรเลือกจากแบบอักษรเริ่มต้นที่มีถิ่นที่อยู่ในระบบปฏิบัติการส่วนใหญ่ได้ ถ้าคุณระบุแบบอักษรที่ไม่ได้อยู่บนเครื่องของผู้ใช้ เบราว์เซอร์จะแสดงหน้าของคุณใช้แบบอักษรเริ่มต้นที่ผู้ใช้ระบุ หมีใจ เกินไป ผู้ใช้สามารถตั้งค่ากำหนดลักษณะของเบราว์เซอร์จะแสดงทุกหน้าในของพวกเขาชื่นชอบอักษร
อ่านบนหน้าจอ
typefaces บางอย่างสามารถเพิ่มเติมอื่น ๆ บนหน้าจอ แบบตัวพิมพ์แบบดั้งเดิมเช่นเวลาโรมันถือเป็นหนึ่งสามารถเข้าใจมากที่สุด ในกระดาษ แต่ ที่หน้าจอขนาดไม่เล็กเกินไป และรูปทรงมีลักษณะผิดปกติ อ่านหน้าจอส่วนใหญ่ได้รับอิทธิพลจาก x-height (ความสูงของตัวพิมพ์เล็ก "x") และขนาดโดยรวมของแบบตัวพิมพ์
แบบตัวพิมพ์แบบ Adapted
เวลาโรมันใหม่เป็นตัวอย่างที่ดีของแบบตัวพิมพ์แบบดั้งเดิมที่ได้รับการดัดแปลงสำหรับใช้งานบนหน้าจอคอมพิวเตอร์ แบบตัวพิมพ์ serif เช่น Times New Roman เป็นเกี่ยวกับค่าเฉลี่ยในการอ่านบนจอคอมพิวเตอร์ และมี x-height ปานกลาง เวลาโรมันใหม่เป็นแบบอักษรที่ดีที่จะใช้ในเอกสารข้อความหนักที่จะคงจะถูกพิมพ์ออกมาอ่าน แทนที่อ่านจากหน้าจอ ขนาดตัวอักษรขนาดกะทัดรัดของ Times New Roman ยังทำให้ทางเลือกที่ดีถ้าคุณต้องการแพ็คของคำเป็นมีขนาดเล็กพื้นที่
ออกแบบมาสำหรับหน้าจอ
Typefaces จอร์เจียและ Verdana ถูกออกแบบโดยเฉพาะสำหรับการอ่านบนหน้าจอคอมพิวเตอร์ พวกเขาได้พูดเกินจริง x-heights และมีประสิทธิภาพมากเมื่อเทียบกับ typefaces มากกว่าขนาดจุดเดียวกัน แบบอักษรเหล่านี้หน้าจอให้อ่านดีสำหรับหน้าเว็บที่ออกแบบมาให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม exaggerated x-heights และ letterforms หนักจอร์เจียและ Verdana บางครั้งดูยิ่งใหญ่เมื่อถูกโอนย้ายไปสื่อความละเอียดสูงของกระดาษ
Typefaces สำหรับสื่ออื่น ๆ
มากความสนใจของเราจะเน้นในรุ่นหน้าจอของเรา แต่เราสามารถควบคุมหน้าลักษณะเมื่อพิมพ์บนกระดาษ พิมพ์มีสีมากขึ้นตัวเลือกเมื่อมันมาถึงการเลือกแบบตัวพิมพ์ typefaces หลายอย่างดูดีบนกระดาษมากกว่าค่อนข้างน้อยที่จะอ่าน และน่าสนใจบนหน้าจอ ในทางตรงกันข้าม มีจุดไม่ระบุแบบตัวพิมพ์สำหรับแต่งมือถือเนื่องจากอุปกรณ์ส่วนใหญ่มีแบบอักษรเดียวกัน
เลือก typefaces
โครงร่างแบบเดิมมากที่สุดสำหรับการใช้ typefaces จะใช้หน้า serif เช่นจอร์เจียหรือ Times New Roman ตัวข้อความและหน้า sans serif เช่น Verdana หรือ Arial เป็นความคมชัดสำหรับพาดหัว ศึกษาต่าง ๆ purport เพื่อแสดงว่า ชนิด serif เป็นสามารถเข้าใจมากขึ้น กว่าชนิด sans serif และในทางกลับกัน คุณสามารถตัดสินอ่านชนิดเฉพาะในบริบทของสถานการณ์จริง — บนหน้าจอ บนกระดาษซึ่งผู้ใช้จะเห็นหน้าเว็บของคุณได้
คุณอาจใช้รูปแบบของอักษร serif หรือหน้า sans serif บริการอย่างใดอย่างหนึ่งสำหรับแสดงชนิด ครอบครัวพิมพ์เดียว และเปลี่ยนน้ำหนักและขนาดสำหรับแสดงชนิดและเน้นความปลอดภัยได้ ถ้าคุณเลือกที่จะรวม serif และ sans serif หน้า เลือกแบบอักษรที่เข้ากันได้ และไม่ได้ใช้ typefaces มากกว่าสอง (หนึ่ง serif หนึ่ง sans serif) บนหน้าแบบนั้น
แบบอักษรมีประโยชน์มากที่สุดที่มาพร้อมกับระบบปฏิบัติการ Microsoft Windows และ Apple Macintosh พิมพ์ได้ที่นี่ การณ์ประสิทธิภาพบนหน้าจอ และ บนกระดาษ จำได้ว่า ผู้ใช้ Macintosh หลายที่ได้ติดตั้ง Microsoft Office จะมีแบบอักษรของ Windows ที่ติดตั้งบนระบบของพวกเขา (8.9 นอก fig.)
ตัวอย่างของบล็อกข้อความสั้นของหน้าจอทั่วไปและแบบอักษรที่พิมพ์ รวมแบบอักษรของหน้าจอ: จอร์เจีย Lucida Bright, Verdana, Arial และ Trebuchet แบบอักษรพิมพ์โดยทั่วไปใช้แสดง: Times New Roman เวลา Arial กเฮลเวติกา
8.9 นอกรูป – หน้าจอทั่วไปแอปเปิ้ลแมคอินทอชและและพิมพ์อักษรได้
ระบุ typefaces
คุณสามารถระบุแบบตัวพิมพ์ใด ๆ ในเว็บเพจ แต่คอมพิวเตอร์หลายเครื่องมีเฉพาะแบบอักษรเริ่มต้นระบบปฏิบัติการติดตั้ง ถ้าแบบตัวพิมพ์ที่คุณระบุไม่มีอยู่บนคอมพิวเตอร์ของผู้ใช้ เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น (โดยทั่วไป Times New Roman หรือครั้ง) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นแบบตัวพิมพ์ที่ต้องการของคุณ คุณสามารถระบุแบบอักษรหลายแบบในแต่ละรูปแบบ เบราว์เซอร์ที่จะตรวจสอบสถานะของแต่ละแบบอักษร (ในลำดับที่กำหนด), ดังนั้นคุณสามารถระบุทางเลือกที่สาม หรือสี่ก่อนเบราว์เซอร์ใช้แบบอักษรเริ่มต้น เช่น "Verdana เจนีวา Arial เฮลเวติกา" เป็นความพยายาม last-ditch คุณสามารถสิ้นสุดรายงานอักษรของคุณ มีการกำหนดแบบอักษรทั่วไปเช่น "serif" วิธี ถ้าเบราว์เซอร์ไม่พบใด ๆ ที่แสดงรายการแบบอักษร มันจะแสดงข้อความแบบอักษรมี serif:
p {ตระกูลแบบอักษร: "Times New Roman" จอร์เจีย เวลา serif }
สังเกตอักษรที่ multiword ชื่อเป็น Times New Roman ต้องปรากฏอยู่ภายในเครื่องหมายอัญประกาศในสเปคของคุณ โปรดสังเกตตัวอย่างแบบอักษรด้านล่างที่แม้ว่า "Trebuchet" และ "Trebuchet ms " เป็นแบบตัวพิมพ์เดียวกัน ชื่อที่ถูกต้องที่คุณระบุในเรื่องรายการแบบอักษร คุณผู้ใช้ Macintosh และ Windows เมื่อต้องการดูแบบตัวพิมพ์ Trebuchet แล้วใช้ทั้งชื่อในรายงานของคุณอักษร:
p {ตระกูลแบบอักษร: "Trebuchet MS", Trebuchet, Verdana, Arial นอยซานส์-serif }
ดีเพื่อให้แน่ใจว่า การตั้งค่าชนิดการทำงานอย่างถูกต้องคือการ ตั้งค่าเบราว์เซอร์ของคุณสัดส่วนแบบอักษรเริ่มต้นการตั้งค่าบางอย่างที่แตกต่างอย่างชัดเจนจากอักษรของผู้ ตัวอย่าง ตั้งแบบอักษรเริ่มต้นของเบราว์เซอร์ของคุณเพื่อ Courier ถ้าคุณไม่ได้ใช้พัสดุในเอกสารของคุณ เมื่อคุณดูหน้าของคุณ สิ่งที่ปรากฏในพัสดุต้องไม่ถูกค่าถูก
พิมพ์ขนาด
สามารถปรับข้อความเป็นสิ่งสำคัญเพื่อเป้าหมายของการใช้งานสากล เพื่อขยับ ใช้หน่วยสัมพัทธ์เพื่อควบคุมการพิมพ์ตัวพิมพ์ขนาด ขอบ และ เยื้อง นำ — หน้า ใช้ข้อความกราฟิกเท่าที่จำเป็น และได้นำเสนอข้อ ข้อความที่แสดงในรูปแบบไม่มีข้อความแต่ภาพ และจึง ไม่สามารถจัดการ — ขยาย สีซึ่งเป็นข้อความล้วนสามารถ ยังสามารถมองเห็นเครื่องมือ การค้นหาให้ โดยไม่มีข้อความทดแทน คำสำคัญในหน้าของคุณอาจจะมองไม่เห็นเพื่อค้นหาข้อความกราฟิกเป็น
กับ css นักออกแบบได้หลายวิธีสำหรับการตั้งค่าขนาด เราขอแนะนำการตั้งค่าข้อความเนื้อหาขนาดเริ่มต้นของข้อกำหนดในการตั้งค่าเบราว์เซอร์ของผู้ใช้ และการตั้งค่าตัวแปรข้อความทั้งหมด (เช่นหัวเรื่อง คำอธิบาย และการเชื่อมโยง) ใช้หน่วยสัมพัทธ์ เช่น ems หรือเปอร์เซ็นต์ ความยาวในเว็บเป็นเหมือนกับความสูงอักษร ซึ่งทำให้หน่วยความสัมพันธ์ และมีความยืดหยุ่นดังนั้นการ ตัวอย่างเช่น ถ้าค่าเริ่มต้นผู้ใช้ตั้งค่า พิกเซล 16 กว่าข้อความยาวสอง ย่อหน้าจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ในการย่อ/ขยายของเบราว์เซอร์เพื่อเปลี่ยนขนาดข้อความพิกเซล 18 เยื้องจะเปลี่ยนพิกเซล 36 ถึงชนิดขนาดใหญ่:
p {ขนาดแบบอักษร: 1em เยื้องข้อความ: 2em; }
เป็นคุณอาจจินตนาการ ความยืดหยุ่นนี้สามารถส่งเค้าโครงเป็น disarray โครงร่างหน้าเว็บส่วนใหญ่จะไม่ได้รับการออกแบบชนิดขนาดใหญ่ในจิตใจ ตัวอย่าง เค้าโครงคงที่จำกัดคอลัมน์ข้อความให้มีความกว้างที่ระบุถูกออกแบบมาโดยทั่วไปเพื่อรองรับมาตรฐาน หรือขนาดเล็ก แน่นอน ขนาดใหญ่ชนิดคอลัมน์ความกว้างคงที่อาจประกอบด้วยเพียงไม่กี่คำ ซึ่งทำให้ข้อความรวมไปถึงอ่าน ผลลัพธ์ข้อความปรับขนาดได้ ใช้เค้าโครงแบบยืดหยุ่นที่เว้าเพื่อรองรับขนาดชนิดใหญ่ (fig. 8.10) (เพิ่มเติมรูปแบบคงที่ และมีความยืดหยุ่น ดูบทที่ 7 กรอบหน้า)
รูป 8.10 — ขยายข้อความสามารถส่งรูปแบบความกว้างคงเป็น disarray (ซ้าย) ตอบแบบยืดหยุ่น "ของเหลว" เค้าโครง (ขวา) มากขึ้นอย่างเมื่อผู้ใช้ขยายข้อความ
ระบบปฏิบัติการแตกต่างกันแสดงชนิดต่าง แม้เมื่อ typefaces เดียวกันใช้ ทั่วไป ชนิดที่แสดงบนเบราว์เซอร์ Windows จะดูใหญ่กว่าเล็กน้อย และบางเบาในน้ำหนักกว่าหน้าเทียบเท่าบน Macintosh ความแตกต่างนี้แสดงแบบอักษรอาจมีผลต่อเค้าโครงของหน้าและโดยรวม "ชนิดสี" หน้า
แต่ละแบบตัวพิมพ์มีเสียงเฉพาะที่ควรเหมาะสมกลมกลืนระหว่างการไหลด้วยวาจา และการแสดงผลของเนื้อหา รุ่นแรกของ html ผู้เขียนเว็บได้ไม่สามารถควบคุม typefaces ("แบบอักษร" ในคำศัพท์ของคอมพิวเตอร์ส่วนบุคคล) แบบอักษรกำหนด โดยเบราว์เซอร์ เพื่อให้หน้าไม่ดูแบบอักษรใดที่ผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขา หรือเธอ Html และ css รุ่นทันสมัยให้นักออกแบบเพื่อระบุแบบตัวพิมพ์ นี้ไม่มีประโยชน์เหตุผลความงามแต่เนื่องจาก มีขนาดแตกต่างกันของ typefaces โครงร่างที่ถูกออกแบบอย่างพิถีพิถันโดยใช้แบบตัวพิมพ์ที่หนึ่งอาจไม่จัดรูปแบบอย่างถูกต้องอีก
ในการระบุ typefaces คุณควรเลือกจากแบบอักษรเริ่มต้นที่มีถิ่นที่อยู่ในระบบปฏิบัติการส่วนใหญ่ได้ ถ้าคุณระบุแบบอักษรที่ไม่ได้อยู่บนเครื่องของผู้ใช้ เบราว์เซอร์จะแสดงหน้าของคุณใช้แบบอักษรเริ่มต้นที่ผู้ใช้ระบุ หมีใจ เกินไป ผู้ใช้สามารถตั้งค่ากำหนดลักษณะของเบราว์เซอร์จะแสดงทุกหน้าในของพวกเขาชื่นชอบอักษร
อ่านบนหน้าจอ
typefaces บางอย่างสามารถเพิ่มเติมอื่น ๆ บนหน้าจอ แบบตัวพิมพ์แบบดั้งเดิมเช่นเวลาโรมันถือเป็นหนึ่งสามารถเข้าใจมากที่สุด ในกระดาษ แต่ ที่หน้าจอขนาดไม่เล็กเกินไป และรูปทรงมีลักษณะผิดปกติ อ่านหน้าจอส่วนใหญ่ได้รับอิทธิพลจาก x-height (ความสูงของตัวพิมพ์เล็ก "x") และขนาดโดยรวมของแบบตัวพิมพ์
แบบตัวพิมพ์แบบ Adapted
เวลาโรมันใหม่เป็นตัวอย่างที่ดีของแบบตัวพิมพ์แบบดั้งเดิมที่ได้รับการดัดแปลงสำหรับใช้งานบนหน้าจอคอมพิวเตอร์ แบบตัวพิมพ์ serif เช่น Times New Roman เป็นเกี่ยวกับค่าเฉลี่ยในการอ่านบนจอคอมพิวเตอร์ และมี x-height ปานกลาง เวลาโรมันใหม่เป็นแบบอักษรที่ดีที่จะใช้ในเอกสารข้อความหนักที่จะคงจะถูกพิมพ์ออกมาอ่าน แทนที่อ่านจากหน้าจอ ขนาดตัวอักษรขนาดกะทัดรัดของ Times New Roman ยังทำให้ทางเลือกที่ดีถ้าคุณต้องการแพ็คของคำเป็นมีขนาดเล็กพื้นที่
ออกแบบมาสำหรับหน้าจอ
Typefaces จอร์เจียและ Verdana ถูกออกแบบโดยเฉพาะสำหรับการอ่านบนหน้าจอคอมพิวเตอร์ พวกเขาได้พูดเกินจริง x-heights และมีประสิทธิภาพมากเมื่อเทียบกับ typefaces มากกว่าขนาดจุดเดียวกัน แบบอักษรเหล่านี้หน้าจอให้อ่านดีสำหรับหน้าเว็บที่ออกแบบมาให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม exaggerated x-heights และ letterforms หนักจอร์เจียและ Verdana บางครั้งดูยิ่งใหญ่เมื่อถูกโอนย้ายไปสื่อความละเอียดสูงของกระดาษ
Typefaces สำหรับสื่ออื่น ๆ
มากความสนใจของเราจะเน้นในรุ่นหน้าจอของเรา แต่เราสามารถควบคุมหน้าลักษณะเมื่อพิมพ์บนกระดาษ พิมพ์มีสีมากขึ้นตัวเลือกเมื่อมันมาถึงการเลือกแบบตัวพิมพ์ typefaces หลายอย่างดูดีบนกระดาษมากกว่าค่อนข้างน้อยที่จะอ่าน และน่าสนใจบนหน้าจอ ในทางตรงกันข้าม มีจุดไม่ระบุแบบตัวพิมพ์สำหรับแต่งมือถือเนื่องจากอุปกรณ์ส่วนใหญ่มีแบบอักษรเดียวกัน
เลือก typefaces
โครงร่างแบบเดิมมากที่สุดสำหรับการใช้ typefaces จะใช้หน้า serif เช่นจอร์เจียหรือ Times New Roman ตัวข้อความและหน้า sans serif เช่น Verdana หรือ Arial เป็นความคมชัดสำหรับพาดหัว ศึกษาต่าง ๆ purport เพื่อแสดงว่า ชนิด serif เป็นสามารถเข้าใจมากขึ้น กว่าชนิด sans serif และในทางกลับกัน คุณสามารถตัดสินอ่านชนิดเฉพาะในบริบทของสถานการณ์จริง — บนหน้าจอ บนกระดาษซึ่งผู้ใช้จะเห็นหน้าเว็บของคุณได้
คุณอาจใช้รูปแบบของอักษร serif หรือหน้า sans serif บริการอย่างใดอย่างหนึ่งสำหรับแสดงชนิด ครอบครัวพิมพ์เดียว และเปลี่ยนน้ำหนักและขนาดสำหรับแสดงชนิดและเน้นความปลอดภัยได้ ถ้าคุณเลือกที่จะรวม serif และ sans serif หน้า เลือกแบบอักษรที่เข้ากันได้ และไม่ได้ใช้ typefaces มากกว่าสอง (หนึ่ง serif หนึ่ง sans serif) บนหน้าแบบนั้น
แบบอักษรมีประโยชน์มากที่สุดที่มาพร้อมกับระบบปฏิบัติการ Microsoft Windows และ Apple Macintosh พิมพ์ได้ที่นี่ การณ์ประสิทธิภาพบนหน้าจอ และ บนกระดาษ จำได้ว่า ผู้ใช้ Macintosh หลายที่ได้ติดตั้ง Microsoft Office จะมีแบบอักษรของ Windows ที่ติดตั้งบนระบบของพวกเขา (8.9 นอก fig.)
ตัวอย่างของบล็อกข้อความสั้นของหน้าจอทั่วไปและแบบอักษรที่พิมพ์ รวมแบบอักษรของหน้าจอ: จอร์เจีย Lucida Bright, Verdana, Arial และ Trebuchet แบบอักษรพิมพ์โดยทั่วไปใช้แสดง: Times New Roman เวลา Arial กเฮลเวติกา
8.9 นอกรูป – หน้าจอทั่วไปแอปเปิ้ลแมคอินทอชและและพิมพ์อักษรได้
ระบุ typefaces
คุณสามารถระบุแบบตัวพิมพ์ใด ๆ ในเว็บเพจ แต่คอมพิวเตอร์หลายเครื่องมีเฉพาะแบบอักษรเริ่มต้นระบบปฏิบัติการติดตั้ง ถ้าแบบตัวพิมพ์ที่คุณระบุไม่มีอยู่บนคอมพิวเตอร์ของผู้ใช้ เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น (โดยทั่วไป Times New Roman หรือครั้ง) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นแบบตัวพิมพ์ที่ต้องการของคุณ คุณสามารถระบุแบบอักษรหลายแบบในแต่ละรูปแบบ เบราว์เซอร์ที่จะตรวจสอบสถานะของแต่ละแบบอักษร (ในลำดับที่กำหนด), ดังนั้นคุณสามารถระบุทางเลือกที่สาม หรือสี่ก่อนเบราว์เซอร์ใช้แบบอักษรเริ่มต้น เช่น "Verdana เจนีวา Arial เฮลเวติกา" เป็นความพยายาม last-ditch คุณสามารถสิ้นสุดรายงานอักษรของคุณ มีการกำหนดแบบอักษรทั่วไปเช่น "serif" วิธี ถ้าเบราว์เซอร์ไม่พบใด ๆ ที่แสดงรายการแบบอักษร มันจะแสดงข้อความแบบอักษรมี serif:
p {ตระกูลแบบอักษร: "Times New Roman" จอร์เจีย เวลา serif }
สังเกตอักษรที่ multiword ชื่อเป็น Times New Roman ต้องปรากฏอยู่ภายในเครื่องหมายอัญประกาศในสเปคของคุณ โปรดสังเกตตัวอย่างแบบอักษรด้านล่างที่แม้ว่า "Trebuchet" และ "Trebuchet ms " เป็นแบบตัวพิมพ์เดียวกัน ชื่อที่ถูกต้องที่คุณระบุในเรื่องรายการแบบอักษร คุณผู้ใช้ Macintosh และ Windows เมื่อต้องการดูแบบตัวพิมพ์ Trebuchet แล้วใช้ทั้งชื่อในรายงานของคุณอักษร:
p {ตระกูลแบบอักษร: "Trebuchet MS", Trebuchet, Verdana, Arial นอยซานส์-serif }
ดีเพื่อให้แน่ใจว่า การตั้งค่าชนิดการทำงานอย่างถูกต้องคือการ ตั้งค่าเบราว์เซอร์ของคุณสัดส่วนแบบอักษรเริ่มต้นการตั้งค่าบางอย่างที่แตกต่างอย่างชัดเจนจากอักษรของผู้ ตัวอย่าง ตั้งแบบอักษรเริ่มต้นของเบราว์เซอร์ของคุณเพื่อ Courier ถ้าคุณไม่ได้ใช้พัสดุในเอกสารของคุณ เมื่อคุณดูหน้าของคุณ สิ่งที่ปรากฏในพัสดุต้องไม่ถูกค่าถูก
พิมพ์ขนาด
สามารถปรับข้อความเป็นสิ่งสำคัญเพื่อเป้าหมายของการใช้งานสากล เพื่อขยับ ใช้หน่วยสัมพัทธ์เพื่อควบคุมการพิมพ์ตัวพิมพ์ขนาด ขอบ และ เยื้อง นำ — หน้า ใช้ข้อความกราฟิกเท่าที่จำเป็น และได้นำเสนอข้อ ข้อความที่แสดงในรูปแบบไม่มีข้อความแต่ภาพ และจึง ไม่สามารถจัดการ — ขยาย สีซึ่งเป็นข้อความล้วนสามารถ ยังสามารถมองเห็นเครื่องมือ การค้นหาให้ โดยไม่มีข้อความทดแทน คำสำคัญในหน้าของคุณอาจจะมองไม่เห็นเพื่อค้นหาข้อความกราฟิกเป็น
กับ css นักออกแบบได้หลายวิธีสำหรับการตั้งค่าขนาด เราขอแนะนำการตั้งค่าข้อความเนื้อหาขนาดเริ่มต้นของข้อกำหนดในการตั้งค่าเบราว์เซอร์ของผู้ใช้ และการตั้งค่าตัวแปรข้อความทั้งหมด (เช่นหัวเรื่อง คำอธิบาย และการเชื่อมโยง) ใช้หน่วยสัมพัทธ์ เช่น ems หรือเปอร์เซ็นต์ ความยาวในเว็บเป็นเหมือนกับความสูงอักษร ซึ่งทำให้หน่วยความสัมพันธ์ และมีความยืดหยุ่นดังนั้นการ ตัวอย่างเช่น ถ้าค่าเริ่มต้นผู้ใช้ตั้งค่า พิกเซล 16 กว่าข้อความยาวสอง ย่อหน้าจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ในการย่อ/ขยายของเบราว์เซอร์เพื่อเปลี่ยนขนาดข้อความพิกเซล 18 เยื้องจะเปลี่ยนพิกเซล 36 ถึงชนิดขนาดใหญ่:
p {ขนาดแบบอักษร: 1em เยื้องข้อความ: 2em; }
เป็นคุณอาจจินตนาการ ความยืดหยุ่นนี้สามารถส่งเค้าโครงเป็น disarray โครงร่างหน้าเว็บส่วนใหญ่จะไม่ได้รับการออกแบบชนิดขนาดใหญ่ในจิตใจ ตัวอย่าง เค้าโครงคงที่จำกัดคอลัมน์ข้อความให้มีความกว้างที่ระบุถูกออกแบบมาโดยทั่วไปเพื่อรองรับมาตรฐาน หรือขนาดเล็ก แน่นอน ขนาดใหญ่ชนิดคอลัมน์ความกว้างคงที่อาจประกอบด้วยเพียงไม่กี่คำ ซึ่งทำให้ข้อความรวมไปถึงอ่าน ผลลัพธ์ข้อความปรับขนาดได้ ใช้เค้าโครงแบบยืดหยุ่นที่เว้าเพื่อรองรับขนาดชนิดใหญ่ (fig. 8.10) (เพิ่มเติมรูปแบบคงที่ และมีความยืดหยุ่น ดูบทที่ 7 กรอบหน้า)
รูป 8.10 — ขยายข้อความสามารถส่งรูปแบบความกว้างคงเป็น disarray (ซ้าย) ตอบแบบยืดหยุ่น "ของเหลว" เค้าโครง (ขวา) มากขึ้นอย่างเมื่อผู้ใช้ขยายข้อความ
ระบบปฏิบัติการแตกต่างกันแสดงชนิดต่าง แม้เมื่อ typefaces เดียวกันใช้ ทั่วไป ชนิดที่แสดงบนเบราว์เซอร์ Windows จะดูใหญ่กว่าเล็กน้อย และบางเบาในน้ำหนักกว่าหน้าเทียบเท่าบน Macintosh ความแตกต่างนี้แสดงแบบอักษรอาจมีผลต่อเค้าโครงของหน้าและโดยรวม "ชนิดสี" หน้า
การแปล กรุณารอสักครู่..
Typefaces
Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of html, web authors had no control over typefaces (“fonts” in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. Modern versions of html and css allow designers to specify typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one typeface may not format correctly in another.
In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user’s machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to display all pages in their favorite font.
Legibility on-screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the typeface.
Adapted traditional typeface
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.
Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.
Typefaces for other media
Much of our attention is focused on the screen version of our pages, but we also have control over how a page looks when printed on paper. Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than the relatively few that are readable and attractive on-screen. In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.
Choosing typefaces
The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Various studies purport to show that serif type is more legible than sans serif type, and vice versa. You can truly judge type legibility only within the context of the situation—on the screen, on paper—as users will see your web page.
You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible, and don’t use more than two typefaces (one serif, one sans serif) on a page.
The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here, differentiated by their effectiveness on-screen and on paper. Remember that many Macintosh users who have installed Microsoft Office will have Windows fonts installed on their systems (fig. 8.9).
Examples of short text blocks of common screen and print fonts. The screen fonts include: Georgia, Lucida Bright, Verdana, Arial, and Trebuchet. The commonly used print fonts shown are: Times New Roman, Times, Arial, and Helvetica.
Figure 8.9 — Common Apple Macintosh and Microsoft Windows screen and print fonts.
Specifying typefaces
You can specify any typeface for your web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user’s computer, the browser will switch to the default font (generally Times New Roman or Times). To increase the chances that the reader will see your preferred typeface, you can specify multiple fonts for each style. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, “Verdana, Geneva, Arial, Helvetica.” As a last-ditch effort you can end your font declaration with a generic font designation such as “serif.” That way, if the browser cannot find any of the listed fonts, it will display the text in an available serif font:
p { font-family: "Times New Roman", Georgia, Times, serif }
Notice that multiword font names such as Times New Roman must appear within quotation marks in your specification. Also note in the font example below that although “Trebuchet” and “Trebuchet ms” are the same typeface, the exact name you specify in the font list matters. If you want both Macintosh and Windows users to see the typeface Trebuchet, then use both names in your font declaration:
p { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif }
A good way to make sure that your type settings are functioning correctly is to set your browser’s default proportional font setting to something that is obviously different from your intended font. For example, set your browser’s default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.
Type size
Scalable text is essential to the goals of universal usability. To ensure scalability, use relative units to control the typography—type size, margins and indents, leading—on the page. Use graphic text sparingly, and always offer a text equivalent. Text rendered to graphic form is no longer text but image and thus cannot be manipulated—enlarged, colored—as plain text can. Graphic text is also invisible to search engines, so without alternate text the most important words on your page may be invisible to search.
With css, designers have many methods for setting type size. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. An em in the web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 16 pixels, than a two-em text indent would be double, or 32 pixels. But if the user used the text zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size:
p { font-size: 1em; text-indent: 2em; }
As you might imagine, this flexibility can send page layouts into disarray. Most web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically designed to accommodate standard or small type. Indeed, at large type sizes a fixed-width column may contain only a few words, which makes the text awkward to read. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes (fig. 8.10). (For more on fixed and flexible layouts, see chapter 7, Page Frameworks.)
Figure 8.10 — Enlarged text can send fixed-width layouts into disarray (left). Flexible “liquid” layouts (right) respond more gracefully when users enlarge text.
Different operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows web browsers will look slightly larger and sometimes lighter in weight than the equivalent face on the Macintosh. This difference in font rendering can affect your page layouts and the overall “type color” of your page.
Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of html, web authors had no control over typefaces (“fonts” in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. Modern versions of html and css allow designers to specify typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one typeface may not format correctly in another.
In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user’s machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to display all pages in their favorite font.
Legibility on-screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase “x”) and the overall size of the typeface.
Adapted traditional typeface
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen and has a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.
Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very robust compared to more traditional typefaces in the same point size. These screen fonts offer excellent legibility for web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of Georgia and Verdana sometimes look massive when transferred to the high-resolution medium of paper.
Typefaces for other media
Much of our attention is focused on the screen version of our pages, but we also have control over how a page looks when printed on paper. Print offers a far richer palette of options when it comes to selecting a typeface; many more typefaces look good on paper than the relatively few that are readable and attractive on-screen. In contrast, there is no point specifying a typeface for handheld styling since most devices have only one font.
Choosing typefaces
The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Various studies purport to show that serif type is more legible than sans serif type, and vice versa. You can truly judge type legibility only within the context of the situation—on the screen, on paper—as users will see your web page.
You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible, and don’t use more than two typefaces (one serif, one sans serif) on a page.
The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here, differentiated by their effectiveness on-screen and on paper. Remember that many Macintosh users who have installed Microsoft Office will have Windows fonts installed on their systems (fig. 8.9).
Examples of short text blocks of common screen and print fonts. The screen fonts include: Georgia, Lucida Bright, Verdana, Arial, and Trebuchet. The commonly used print fonts shown are: Times New Roman, Times, Arial, and Helvetica.
Figure 8.9 — Common Apple Macintosh and Microsoft Windows screen and print fonts.
Specifying typefaces
You can specify any typeface for your web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user’s computer, the browser will switch to the default font (generally Times New Roman or Times). To increase the chances that the reader will see your preferred typeface, you can specify multiple fonts for each style. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, “Verdana, Geneva, Arial, Helvetica.” As a last-ditch effort you can end your font declaration with a generic font designation such as “serif.” That way, if the browser cannot find any of the listed fonts, it will display the text in an available serif font:
p { font-family: "Times New Roman", Georgia, Times, serif }
Notice that multiword font names such as Times New Roman must appear within quotation marks in your specification. Also note in the font example below that although “Trebuchet” and “Trebuchet ms” are the same typeface, the exact name you specify in the font list matters. If you want both Macintosh and Windows users to see the typeface Trebuchet, then use both names in your font declaration:
p { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif }
A good way to make sure that your type settings are functioning correctly is to set your browser’s default proportional font setting to something that is obviously different from your intended font. For example, set your browser’s default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.
Type size
Scalable text is essential to the goals of universal usability. To ensure scalability, use relative units to control the typography—type size, margins and indents, leading—on the page. Use graphic text sparingly, and always offer a text equivalent. Text rendered to graphic form is no longer text but image and thus cannot be manipulated—enlarged, colored—as plain text can. Graphic text is also invisible to search engines, so without alternate text the most important words on your page may be invisible to search.
With css, designers have many methods for setting type size. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. An em in the web context is the same as the font height, which makes it a relative unit and therefore flexible. For example, if the user-set default is 16 pixels, than a two-em text indent would be double, or 32 pixels. But if the user used the text zoom feature of the browser to change the text size to 18 pixels, the indent would change to 36 pixels to reflect the larger type size:
p { font-size: 1em; text-indent: 2em; }
As you might imagine, this flexibility can send page layouts into disarray. Most web page layouts are not designed with large type in mind. For example, fixed layouts that limit the text column to a specified width are typically designed to accommodate standard or small type. Indeed, at large type sizes a fixed-width column may contain only a few words, which makes the text awkward to read. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes (fig. 8.10). (For more on fixed and flexible layouts, see chapter 7, Page Frameworks.)
Figure 8.10 — Enlarged text can send fixed-width layouts into disarray (left). Flexible “liquid” layouts (right) respond more gracefully when users enlarge text.
Different operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows web browsers will look slightly larger and sometimes lighter in weight than the equivalent face on the Macintosh. This difference in font rendering can affect your page layouts and the overall “type color” of your page.
การแปล กรุณารอสักครู่..
ชนิด
แต่ละแบบมีเอกลักษณ์เสียงที่ควรจะผลิตพอดีกลมกลืนระหว่างทางวาจาและการมองเห็นของเนื้อหาของคุณ กับเวอร์ชันแรกของ html , เขียนเว็บได้ไม่มีการควบคุมเหนือ typefaces ( " แบบอักษร " ศัพท์คอมพิวเตอร์ส่วนบุคคล ) แบบอักษรที่ถูกตั้งโดยเบราว์เซอร์ , หน้าถูกแสดงในแบบอักษรใด ดังนั้นผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขาหรือเธอ .รุ่นที่ทันสมัยของ HTML และ CSS ช่วยให้นักออกแบบเพื่อระบุตัวอักษร . นี้จะเป็นประโยชน์ไม่เพียง แต่สำหรับเหตุผลที่สวยงาม แต่ยังเพราะของที่แตกต่างกันขนาดของชนิด . เค้าโครงที่ออกแบบมาอย่างรอบคอบ ใช้ตัวอักษรอาจจะไม่จัดรูปแบบได้อย่างถูกต้องในอีก
ในการระบุชนิด คุณควรเลือกจากแบบอักษรเริ่มต้นสำหรับผู้อยู่อาศัยมากที่สุดระบบปฏิบัติการถ้าคุณระบุตัวอักษรที่ไม่ได้ ในเครื่องของผู้ใช้เบราว์เซอร์จะแสดงหน้าเว็บของคุณโดยใช้ผู้ใช้ที่ระบุตัวอักษรเริ่มต้น หมีในจิตใจด้วย ที่ผู้ใช้สามารถตั้งค่าเบราว์เซอร์ของพวกเขาที่จะแสดงหน้าเว็บทั้งหมดในตัวอักษรที่ชื่นชอบของพวกเขา
บางชนิดมีความชัดเจนบนหน้าจอชัดเจนมากขึ้นกว่าคนอื่น ๆบนหน้าจอแบบดั้งเดิมเช่นสมัยโรมันถือเป็นหนึ่งในที่สวยที่สุดบนกระดาษ แต่ที่ความละเอียดหน้าจอมีขนาดเล็กเกินไป และรูปทรงที่ดูผิดปกติ การทดสอบหน้าจอส่วนใหญ่ได้รับอิทธิพลจาก x-height ( ความสูงของอักษรตัวพิมพ์เล็ก " X " ) และขนาดโดยรวมของตัวอักษร
ตัวอักษรแบบดัดแปลงครั้งใหม่โรมัน เป็นตัวอย่างที่ดีของแบบดั้งเดิมที่ถูกดัดแปลงเพื่อใช้ใน หน้าจอ คอมพิวเตอร์ เป็นอักษร serif เช่น Times New Roman กำลังเฉลี่ยในการทดสอบบนหน้าจอคอมพิวเตอร์ และมี x-height ปานกลาง ครั้งใหม่โรมันเป็นแบบอักษรที่ดีเพื่อใช้ในเอกสารหนักที่อาจจะพิมพ์ข้อความ โดยผู้อ่าน มากกว่าอ่านจากหน้าจอขนาด ขนาดของตัวอักษร Times New Roman ยังทำให้มันเป็นทางเลือกที่ดีถ้าคุณต้องการที่จะแพ็คมากของคำลงในพื้นที่ขนาดเล็ก ที่ออกแบบมาสำหรับหน้าจอ
typefaces เช่นจอร์เจียและ Verdana ถูกออกแบบมาโดยเฉพาะสำหรับการทดสอบบนหน้าจอ คอมพิวเตอร์ มี x-heights ที่พูดเกินจริงและแข็งแกร่งมากเมื่อเทียบกับแบบดั้งเดิมมากขึ้นชนิดในจุดเดียวกันขนาดแบบอักษรที่หน้าจอนี้ให้ความชัดเจนที่ดีสำหรับหน้าเว็บที่ออกแบบให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม x-heights letterforms พูดเกินจริงและหนักของจอร์เจียและ Verdana บางครั้งดูใหญ่เมื่อย้ายไปที่ความละเอียดสูงกลางของกระดาษชนิดสำหรับสื่ออื่น ๆ .
มากของเราความสนใจมุ่งเน้นไปที่หน้าจอของรุ่นของเราหน้าแต่เรายังสามารถควบคุมวิธีการที่หน้าดู เมื่อพิมพ์บนกระดาษ พิมพ์ข้อเสนอจานไกลยิ่งขึ้นของตัวเลือกเมื่อมันมาถึงการเลือกแบบอักษร ; หลายไทป์เฟซดูดีบนกระดาษมากกว่า ค่อนข้างไม่กี่ที่สามารถอ่านได้บนหน้าจอและมีเสน่ห์ ในทางตรงกันข้าม มีจุดที่ไม่มีการระบุแบบมือถือสไตล์เนื่องจากอุปกรณ์ส่วนใหญ่มีเพียงหนึ่งตัวอักษร เลือกชนิด
รูปแบบปกติมากที่สุดสำหรับการใช้ไทป์เฟซคือการใช้หน้า serif เช่น Times New Roman หรือจอร์เจีย ตัวอักษร Sans serif ร่างกายและใบหน้าเช่น Verdana หรือ Arial เป็นส่วนข่าว การศึกษาต่างๆ มีความหมายแสดงชนิด Serif จะชัดเจนกว่าแบบ Sans Serif และในทางกลับกัน คุณอย่างแท้จริงสามารถตัดสินประเภทความชัดเจนเฉพาะในบริบทของสถานการณ์บนหน้าจอบนกระดาษที่ผู้ใช้จะเห็นหน้าเว็บของคุณ .
คุณอาจใช้รูปแบบของแบบอักษร Serif หรือตัดกัน Sans serif หน้าสำหรับการแสดงประเภท มันปลอดภัยที่จะใช้พิมพ์เดียวและครอบครัวแตกต่างกัน น้ำหนักและขนาด ชนิดของจอแสดงผลและความสำคัญของมัน ถ้าคุณเลือกที่จะรวมเซริฟ และ Sans serif หน้า เลือกแบบอักษรที่เข้ากันได้ และไม่ใช้มากกว่าสองชนิด ( Serif ,หนึ่ง Sans serif ) บนหน้า
เป็นประโยชน์มากที่สุดแบบอักษรเรือกับ Apple Macintosh และระบบปฏิบัติการ Microsoft Windows จะทำซ้ำที่นี่แตกต่างจากประสิทธิภาพของพวกเขาบนหน้าจอและบนกระดาษ จำได้ว่าผู้ใช้แมคอินทอช หลายคนที่ได้ติดตั้ง Microsoft Office จะมีหน้าต่างแบบอักษรที่ติดตั้งในระบบ ( ภาพที่ 8 ) .
ตัวอย่างของบล็อกข้อความสั้น ทั่วไป หน้าจอและพิมพ์แบบอักษร หน้าจอแบบอักษรรวม : Georgia , lucida สดใส , Verdana , Arial และ Trebuchet . ที่ใช้กันทั่วไปพิมพ์แบบอักษรที่แสดง : ครั้งใหม่โรมันครั้ง , Arial , Helvetica , 8.9 และ .
รูปทั่วไป -- แอปเปิ้ลแมคอินทอชและ Microsoft Windows หน้าจอและพิมพ์แบบอักษรที่ระบุชนิด
คุณสามารถระบุตัวอักษรสำหรับหน้าเว็บของคุณแต่คอมพิวเตอร์มากมีเพียงระบบปฏิบัติการเริ่มต้นแบบอักษรที่ติดตั้ง ถ้าตัวอักษรที่คุณระบุจะไม่สามารถใช้ได้บนคอมพิวเตอร์ของผู้ใช้เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น ( โดยทั่วไปครั้งใหม่โรมันหรือครั้ง ) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นตัวอักษรที่คุณต้องการ คุณสามารถกำหนดแบบอักษรหลายสำหรับแต่ละสไตล์เบราว์เซอร์จะตรวจสอบสถานะของแต่ละตัวอักษรในคำสั่ง ) , เพื่อให้คุณสามารถระบุสามหรือสี่แบบก่อนที่จะใช้แบบอักษรเริ่มต้นเบราว์เซอร์ ตัวอย่างเช่น " Verdana , เจนีวา , Arial , Helvetica " เป็นความพยายามคลองสุดท้ายคุณสามารถสิ้นสุดการประกาศชื่อแบบอักษรของคุณด้วยตัวอักษรทั่วไปเช่น " serif " วิธีนี้ หากเบราว์เซอร์ไม่พบใด ๆของรายการแบบอักษรมันจะแสดงข้อความในแบบอักษร Serif ใช้ได้ :
p { font ครอบครัว : " Times New Roman " , จอร์เจีย , ครั้ง , serif }
สังเกตว่า multiword font ชื่อเช่น Times New Roman ต้องปรากฏภายในเครื่องหมายอัญประกาศในสเปค นอกจากนี้ยังทราบในแบบอักษรตัวอย่างด้านล่างว่า " เครื่องยิงหิน " และ " Trebuchet MS " เป็นแบบเดียวกัน ชื่อที่แน่นอนที่คุณระบุในรายการแบบอักษรที่สำคัญถ้าคุณต้องการทั้ง Macintosh และ Windows ผู้ใช้สามารถเห็นตัวอักษร Trebuchet นั้นใช้ชื่อทั้งสองในปฏิญญาแบบอักษรของคุณ :
p { font ครอบครัว : " Trebuchet MS " Trebuchet , Verdana Arial , Sans Serif }
เป็นวิธีที่ดีเพื่อให้แน่ใจว่า การตั้งค่าชนิดของคุณมีการทำงานอย่างถูกต้องคือการตั้งค่าเบราว์เซอร์ของคุณเริ่มต้นการตั้งค่าขนาดตัวอักษรที่เห็นได้ชัดว่าแตกต่างจากตัวอักษรของคุณไว้ตัวอย่างเช่นการตั้งค่าเบราว์เซอร์ของคุณเพื่อส่งเอกสารแบบอักษรเริ่มต้นถ้าคุณไม่ได้ใช้ Courier ในเอกสารของคุณ เมื่อคุณดูหน้าเว็บของคุณ อะไรที่ปรากฏในเอกสารต้องไม่ทำเครื่องหมายขึ้นอย่างถูกต้อง .
ขนาดชนิดยืดหยุ่นข้อความสรุปเป้าหมายของสากลการใช้งานของ เพื่อให้ scalability , ใช้หน่วยที่สัมพันธ์กับการควบคุมการพิมพ์ประเภท ขนาด ขอบ และเยื้อง นำทาง บนหน้าใช้ข้อความกราฟิกอย่างจํากัด และ มักจะมีข้อความเทียบเท่า ข้อความที่แสดงผลในรูปแบบกราฟฟิก ไม่มีข้อความ แต่ภาพและดังนั้นจึงไม่สามารถควบคุมการขยาย , สีเป็นข้อความธรรมดาได้ ข้อความกราฟิกยังมองไม่เห็นเครื่องมือค้นหา โดยไม่ต้องสลับข้อความถ้อยคำที่สำคัญที่สุดบนหน้าของคุณอาจจะมองไม่เห็นการค้นหา
กับ CSS , นักออกแบบมีหลายวิธีสำหรับการตั้งค่าขนาดพิมพ์เราขอแนะนำการตั้งค่าข้อความของร่างกายเพื่อเริ่มต้นข้อความขนาดที่กำหนดไว้ในการตั้งค่าเบราว์เซอร์ของผู้ใช้และการตั้งค่าตัวแปรข้อความทั้งหมด ( เช่น หัวเรื่อง คำอธิบายภาพและการเชื่อมโยง ) โดยใช้หน่วยสัมพัทธ์ เช่น EMS หรือร้อยละ การทำเว็บบริบท คือเหมือนกับตัวอักษรสูงซึ่งทำให้มันเป็นหน่วยสัมพัทธ์ และยืดหยุ่น ดังนั้น ตัวอย่างเช่นหากผู้ใช้ตั้งค่าเริ่มต้นคือ 16 พิกเซลกว่าสองเอ็มข้อความเยื้องจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ข้อความคุณสมบัติการซูมของเบราว์เซอร์เพื่อเปลี่ยนข้อความขนาด 18 pixel เยื้องจะเปลี่ยน 36 พิกเซลเพื่อสะท้อนขนาดใหญ่ ขนาด :
ขนาดตัวอักษร P { : 1em ; ข้อความเยื้อง : 2em ; }
อย่างที่คุณจินตนาการได้ ความยืดหยุ่นนี้สามารถส่งเค้าโครงหน้า ในความวุ่นวายเค้าโครงหน้าเว็บส่วนใหญ่ไม่ได้ออกแบบพิมพ์ใหญ่ในใจ ตัวอย่างเช่น การแก้ไขเค้าโครงที่กำหนดข้อความคอลัมน์ความกว้างที่ระบุโดยทั่วไปจะออกแบบมาเพื่อรองรับมาตรฐานหรือพิมพ์เล็ก จริงที่ชนิดขนาดใหญ่ขนาดความกว้างคอลัมน์คงที่อาจประกอบด้วยเพียงไม่กี่คำ ที่ทำให้ข้อความแปลกๆที่อ่าน สำหรับผลลัพธ์ที่ดีที่สุดกับข้อความปรับขนาดใช้ความยืดหยุ่นในรูปแบบที่เปลี่ยนแปลงอย่างสิ้นเชิง เพื่อรองรับขนาดพิมพ์ใหญ่ ( รูปที่ 8.10 ) ( สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขและรูปแบบยืดหยุ่นดูบทที่ 7 กรอบ หน้า )
รูปที่ 8.10 - ขยายข้อความสามารถส่งเค้าโครงความกว้างคงที่ในความอลหม่าน ( ซ้าย ) ยืดหยุ่น " ของเหลว " เลย์เอาต์ ( ขวา ) ตอบสนองอย่างสิ้นเชิง เมื่อผู้ใช้ขยายข้อความ
ระบบปฏิบัติการที่แตกต่างกันแสดงประเภทต่างแม้ว่าชนิดเดียวกันจะถูกใช้ ในทั่วไป , ประเภทที่แสดงบนหน้าต่างเว็บเบราเซอร์จะดูใหญ่กว่าเล็กน้อยและบางครั้งเบาในน้ำหนักกว่าเทียบเท่าใบหน้าบน Macintosh . ความแตกต่างในการแสดงผลตัวอักษรสามารถส่งผลกระทบต่อรูปแบบหน้าของคุณและรวมทุกประเภท " สี " ของหน้าของคุณ
แต่ละแบบมีเอกลักษณ์เสียงที่ควรจะผลิตพอดีกลมกลืนระหว่างทางวาจาและการมองเห็นของเนื้อหาของคุณ กับเวอร์ชันแรกของ html , เขียนเว็บได้ไม่มีการควบคุมเหนือ typefaces ( " แบบอักษร " ศัพท์คอมพิวเตอร์ส่วนบุคคล ) แบบอักษรที่ถูกตั้งโดยเบราว์เซอร์ , หน้าถูกแสดงในแบบอักษรใด ดังนั้นผู้ใช้ที่ระบุในการตั้งค่าเบราว์เซอร์ของเขาหรือเธอ .รุ่นที่ทันสมัยของ HTML และ CSS ช่วยให้นักออกแบบเพื่อระบุตัวอักษร . นี้จะเป็นประโยชน์ไม่เพียง แต่สำหรับเหตุผลที่สวยงาม แต่ยังเพราะของที่แตกต่างกันขนาดของชนิด . เค้าโครงที่ออกแบบมาอย่างรอบคอบ ใช้ตัวอักษรอาจจะไม่จัดรูปแบบได้อย่างถูกต้องในอีก
ในการระบุชนิด คุณควรเลือกจากแบบอักษรเริ่มต้นสำหรับผู้อยู่อาศัยมากที่สุดระบบปฏิบัติการถ้าคุณระบุตัวอักษรที่ไม่ได้ ในเครื่องของผู้ใช้เบราว์เซอร์จะแสดงหน้าเว็บของคุณโดยใช้ผู้ใช้ที่ระบุตัวอักษรเริ่มต้น หมีในจิตใจด้วย ที่ผู้ใช้สามารถตั้งค่าเบราว์เซอร์ของพวกเขาที่จะแสดงหน้าเว็บทั้งหมดในตัวอักษรที่ชื่นชอบของพวกเขา
บางชนิดมีความชัดเจนบนหน้าจอชัดเจนมากขึ้นกว่าคนอื่น ๆบนหน้าจอแบบดั้งเดิมเช่นสมัยโรมันถือเป็นหนึ่งในที่สวยที่สุดบนกระดาษ แต่ที่ความละเอียดหน้าจอมีขนาดเล็กเกินไป และรูปทรงที่ดูผิดปกติ การทดสอบหน้าจอส่วนใหญ่ได้รับอิทธิพลจาก x-height ( ความสูงของอักษรตัวพิมพ์เล็ก " X " ) และขนาดโดยรวมของตัวอักษร
ตัวอักษรแบบดัดแปลงครั้งใหม่โรมัน เป็นตัวอย่างที่ดีของแบบดั้งเดิมที่ถูกดัดแปลงเพื่อใช้ใน หน้าจอ คอมพิวเตอร์ เป็นอักษร serif เช่น Times New Roman กำลังเฉลี่ยในการทดสอบบนหน้าจอคอมพิวเตอร์ และมี x-height ปานกลาง ครั้งใหม่โรมันเป็นแบบอักษรที่ดีเพื่อใช้ในเอกสารหนักที่อาจจะพิมพ์ข้อความ โดยผู้อ่าน มากกว่าอ่านจากหน้าจอขนาด ขนาดของตัวอักษร Times New Roman ยังทำให้มันเป็นทางเลือกที่ดีถ้าคุณต้องการที่จะแพ็คมากของคำลงในพื้นที่ขนาดเล็ก ที่ออกแบบมาสำหรับหน้าจอ
typefaces เช่นจอร์เจียและ Verdana ถูกออกแบบมาโดยเฉพาะสำหรับการทดสอบบนหน้าจอ คอมพิวเตอร์ มี x-heights ที่พูดเกินจริงและแข็งแกร่งมากเมื่อเทียบกับแบบดั้งเดิมมากขึ้นชนิดในจุดเดียวกันขนาดแบบอักษรที่หน้าจอนี้ให้ความชัดเจนที่ดีสำหรับหน้าเว็บที่ออกแบบให้สามารถอ่านได้โดยตรงจากหน้าจอ อย่างไรก็ตาม x-heights letterforms พูดเกินจริงและหนักของจอร์เจียและ Verdana บางครั้งดูใหญ่เมื่อย้ายไปที่ความละเอียดสูงกลางของกระดาษชนิดสำหรับสื่ออื่น ๆ .
มากของเราความสนใจมุ่งเน้นไปที่หน้าจอของรุ่นของเราหน้าแต่เรายังสามารถควบคุมวิธีการที่หน้าดู เมื่อพิมพ์บนกระดาษ พิมพ์ข้อเสนอจานไกลยิ่งขึ้นของตัวเลือกเมื่อมันมาถึงการเลือกแบบอักษร ; หลายไทป์เฟซดูดีบนกระดาษมากกว่า ค่อนข้างไม่กี่ที่สามารถอ่านได้บนหน้าจอและมีเสน่ห์ ในทางตรงกันข้าม มีจุดที่ไม่มีการระบุแบบมือถือสไตล์เนื่องจากอุปกรณ์ส่วนใหญ่มีเพียงหนึ่งตัวอักษร เลือกชนิด
รูปแบบปกติมากที่สุดสำหรับการใช้ไทป์เฟซคือการใช้หน้า serif เช่น Times New Roman หรือจอร์เจีย ตัวอักษร Sans serif ร่างกายและใบหน้าเช่น Verdana หรือ Arial เป็นส่วนข่าว การศึกษาต่างๆ มีความหมายแสดงชนิด Serif จะชัดเจนกว่าแบบ Sans Serif และในทางกลับกัน คุณอย่างแท้จริงสามารถตัดสินประเภทความชัดเจนเฉพาะในบริบทของสถานการณ์บนหน้าจอบนกระดาษที่ผู้ใช้จะเห็นหน้าเว็บของคุณ .
คุณอาจใช้รูปแบบของแบบอักษร Serif หรือตัดกัน Sans serif หน้าสำหรับการแสดงประเภท มันปลอดภัยที่จะใช้พิมพ์เดียวและครอบครัวแตกต่างกัน น้ำหนักและขนาด ชนิดของจอแสดงผลและความสำคัญของมัน ถ้าคุณเลือกที่จะรวมเซริฟ และ Sans serif หน้า เลือกแบบอักษรที่เข้ากันได้ และไม่ใช้มากกว่าสองชนิด ( Serif ,หนึ่ง Sans serif ) บนหน้า
เป็นประโยชน์มากที่สุดแบบอักษรเรือกับ Apple Macintosh และระบบปฏิบัติการ Microsoft Windows จะทำซ้ำที่นี่แตกต่างจากประสิทธิภาพของพวกเขาบนหน้าจอและบนกระดาษ จำได้ว่าผู้ใช้แมคอินทอช หลายคนที่ได้ติดตั้ง Microsoft Office จะมีหน้าต่างแบบอักษรที่ติดตั้งในระบบ ( ภาพที่ 8 ) .
ตัวอย่างของบล็อกข้อความสั้น ทั่วไป หน้าจอและพิมพ์แบบอักษร หน้าจอแบบอักษรรวม : Georgia , lucida สดใส , Verdana , Arial และ Trebuchet . ที่ใช้กันทั่วไปพิมพ์แบบอักษรที่แสดง : ครั้งใหม่โรมันครั้ง , Arial , Helvetica , 8.9 และ .
รูปทั่วไป -- แอปเปิ้ลแมคอินทอชและ Microsoft Windows หน้าจอและพิมพ์แบบอักษรที่ระบุชนิด
คุณสามารถระบุตัวอักษรสำหรับหน้าเว็บของคุณแต่คอมพิวเตอร์มากมีเพียงระบบปฏิบัติการเริ่มต้นแบบอักษรที่ติดตั้ง ถ้าตัวอักษรที่คุณระบุจะไม่สามารถใช้ได้บนคอมพิวเตอร์ของผู้ใช้เบราว์เซอร์จะเปลี่ยนแบบอักษรเริ่มต้น ( โดยทั่วไปครั้งใหม่โรมันหรือครั้ง ) เพื่อเพิ่มโอกาสที่ผู้อ่านจะเห็นตัวอักษรที่คุณต้องการ คุณสามารถกำหนดแบบอักษรหลายสำหรับแต่ละสไตล์เบราว์เซอร์จะตรวจสอบสถานะของแต่ละตัวอักษรในคำสั่ง ) , เพื่อให้คุณสามารถระบุสามหรือสี่แบบก่อนที่จะใช้แบบอักษรเริ่มต้นเบราว์เซอร์ ตัวอย่างเช่น " Verdana , เจนีวา , Arial , Helvetica " เป็นความพยายามคลองสุดท้ายคุณสามารถสิ้นสุดการประกาศชื่อแบบอักษรของคุณด้วยตัวอักษรทั่วไปเช่น " serif " วิธีนี้ หากเบราว์เซอร์ไม่พบใด ๆของรายการแบบอักษรมันจะแสดงข้อความในแบบอักษร Serif ใช้ได้ :
p { font ครอบครัว : " Times New Roman " , จอร์เจีย , ครั้ง , serif }
สังเกตว่า multiword font ชื่อเช่น Times New Roman ต้องปรากฏภายในเครื่องหมายอัญประกาศในสเปค นอกจากนี้ยังทราบในแบบอักษรตัวอย่างด้านล่างว่า " เครื่องยิงหิน " และ " Trebuchet MS " เป็นแบบเดียวกัน ชื่อที่แน่นอนที่คุณระบุในรายการแบบอักษรที่สำคัญถ้าคุณต้องการทั้ง Macintosh และ Windows ผู้ใช้สามารถเห็นตัวอักษร Trebuchet นั้นใช้ชื่อทั้งสองในปฏิญญาแบบอักษรของคุณ :
p { font ครอบครัว : " Trebuchet MS " Trebuchet , Verdana Arial , Sans Serif }
เป็นวิธีที่ดีเพื่อให้แน่ใจว่า การตั้งค่าชนิดของคุณมีการทำงานอย่างถูกต้องคือการตั้งค่าเบราว์เซอร์ของคุณเริ่มต้นการตั้งค่าขนาดตัวอักษรที่เห็นได้ชัดว่าแตกต่างจากตัวอักษรของคุณไว้ตัวอย่างเช่นการตั้งค่าเบราว์เซอร์ของคุณเพื่อส่งเอกสารแบบอักษรเริ่มต้นถ้าคุณไม่ได้ใช้ Courier ในเอกสารของคุณ เมื่อคุณดูหน้าเว็บของคุณ อะไรที่ปรากฏในเอกสารต้องไม่ทำเครื่องหมายขึ้นอย่างถูกต้อง .
ขนาดชนิดยืดหยุ่นข้อความสรุปเป้าหมายของสากลการใช้งานของ เพื่อให้ scalability , ใช้หน่วยที่สัมพันธ์กับการควบคุมการพิมพ์ประเภท ขนาด ขอบ และเยื้อง นำทาง บนหน้าใช้ข้อความกราฟิกอย่างจํากัด และ มักจะมีข้อความเทียบเท่า ข้อความที่แสดงผลในรูปแบบกราฟฟิก ไม่มีข้อความ แต่ภาพและดังนั้นจึงไม่สามารถควบคุมการขยาย , สีเป็นข้อความธรรมดาได้ ข้อความกราฟิกยังมองไม่เห็นเครื่องมือค้นหา โดยไม่ต้องสลับข้อความถ้อยคำที่สำคัญที่สุดบนหน้าของคุณอาจจะมองไม่เห็นการค้นหา
กับ CSS , นักออกแบบมีหลายวิธีสำหรับการตั้งค่าขนาดพิมพ์เราขอแนะนำการตั้งค่าข้อความของร่างกายเพื่อเริ่มต้นข้อความขนาดที่กำหนดไว้ในการตั้งค่าเบราว์เซอร์ของผู้ใช้และการตั้งค่าตัวแปรข้อความทั้งหมด ( เช่น หัวเรื่อง คำอธิบายภาพและการเชื่อมโยง ) โดยใช้หน่วยสัมพัทธ์ เช่น EMS หรือร้อยละ การทำเว็บบริบท คือเหมือนกับตัวอักษรสูงซึ่งทำให้มันเป็นหน่วยสัมพัทธ์ และยืดหยุ่น ดังนั้น ตัวอย่างเช่นหากผู้ใช้ตั้งค่าเริ่มต้นคือ 16 พิกเซลกว่าสองเอ็มข้อความเยื้องจะเป็นคู่ หรือ 32 พิกเซล แต่ถ้าผู้ใช้ใช้ข้อความคุณสมบัติการซูมของเบราว์เซอร์เพื่อเปลี่ยนข้อความขนาด 18 pixel เยื้องจะเปลี่ยน 36 พิกเซลเพื่อสะท้อนขนาดใหญ่ ขนาด :
ขนาดตัวอักษร P { : 1em ; ข้อความเยื้อง : 2em ; }
อย่างที่คุณจินตนาการได้ ความยืดหยุ่นนี้สามารถส่งเค้าโครงหน้า ในความวุ่นวายเค้าโครงหน้าเว็บส่วนใหญ่ไม่ได้ออกแบบพิมพ์ใหญ่ในใจ ตัวอย่างเช่น การแก้ไขเค้าโครงที่กำหนดข้อความคอลัมน์ความกว้างที่ระบุโดยทั่วไปจะออกแบบมาเพื่อรองรับมาตรฐานหรือพิมพ์เล็ก จริงที่ชนิดขนาดใหญ่ขนาดความกว้างคอลัมน์คงที่อาจประกอบด้วยเพียงไม่กี่คำ ที่ทำให้ข้อความแปลกๆที่อ่าน สำหรับผลลัพธ์ที่ดีที่สุดกับข้อความปรับขนาดใช้ความยืดหยุ่นในรูปแบบที่เปลี่ยนแปลงอย่างสิ้นเชิง เพื่อรองรับขนาดพิมพ์ใหญ่ ( รูปที่ 8.10 ) ( สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขและรูปแบบยืดหยุ่นดูบทที่ 7 กรอบ หน้า )
รูปที่ 8.10 - ขยายข้อความสามารถส่งเค้าโครงความกว้างคงที่ในความอลหม่าน ( ซ้าย ) ยืดหยุ่น " ของเหลว " เลย์เอาต์ ( ขวา ) ตอบสนองอย่างสิ้นเชิง เมื่อผู้ใช้ขยายข้อความ
ระบบปฏิบัติการที่แตกต่างกันแสดงประเภทต่างแม้ว่าชนิดเดียวกันจะถูกใช้ ในทั่วไป , ประเภทที่แสดงบนหน้าต่างเว็บเบราเซอร์จะดูใหญ่กว่าเล็กน้อยและบางครั้งเบาในน้ำหนักกว่าเทียบเท่าใบหน้าบน Macintosh . ความแตกต่างในการแสดงผลตัวอักษรสามารถส่งผลกระทบต่อรูปแบบหน้าของคุณและรวมทุกประเภท " สี " ของหน้าของคุณ
การแปล กรุณารอสักครู่..
ภาษาอื่น ๆ
การสนับสนุนเครื่องมือแปลภาษา: กรีก, กันนาดา, กาลิเชียน, คลิงออน, คอร์สิกา, คาซัค, คาตาลัน, คินยารวันดา, คีร์กิซ, คุชราต, จอร์เจีย, จีน, จีนดั้งเดิม, ชวา, ชิเชวา, ซามัว, ซีบัวโน, ซุนดา, ซูลู, ญี่ปุ่น, ดัตช์, ตรวจหาภาษา, ตุรกี, ทมิฬ, ทาจิก, ทาทาร์, นอร์เวย์, บอสเนีย, บัลแกเรีย, บาสก์, ปัญจาป, ฝรั่งเศส, พาชตู, ฟริเชียน, ฟินแลนด์, ฟิลิปปินส์, ภาษาอินโดนีเซี, มองโกเลีย, มัลทีส, มาซีโดเนีย, มาราฐี, มาลากาซี, มาลายาลัม, มาเลย์, ม้ง, ยิดดิช, ยูเครน, รัสเซีย, ละติน, ลักเซมเบิร์ก, ลัตเวีย, ลาว, ลิทัวเนีย, สวาฮิลี, สวีเดน, สิงหล, สินธี, สเปน, สโลวัก, สโลวีเนีย, อังกฤษ, อัมฮาริก, อาร์เซอร์ไบจัน, อาร์เมเนีย, อาหรับ, อิกโบ, อิตาลี, อุยกูร์, อุสเบกิสถาน, อูรดู, ฮังการี, ฮัวซา, ฮาวาย, ฮินดี, ฮีบรู, เกลิกสกอต, เกาหลี, เขมร, เคิร์ด, เช็ก, เซอร์เบียน, เซโซโท, เดนมาร์ก, เตลูกู, เติร์กเมน, เนปาล, เบงกอล, เบลารุส, เปอร์เซีย, เมารี, เมียนมา (พม่า), เยอรมัน, เวลส์, เวียดนาม, เอสเปอแรนโต, เอสโทเนีย, เฮติครีโอล, แอฟริกา, แอลเบเนีย, โคซา, โครเอเชีย, โชนา, โซมาลี, โปรตุเกส, โปแลนด์, โยรูบา, โรมาเนีย, โอเดีย (โอริยา), ไทย, ไอซ์แลนด์, ไอร์แลนด์, การแปลภาษา.
- แต่ฉันนานๆจะเปิด เพราะปกติใช้ใช้e-mailขอ
- ดึกแล้ว ใช้ขออนุญาตนอน
- collide
- Deactivate Your AccountWe're sad to see
- to establish
- สีตาของคุณมันสวยมาก
- At the calcinations temperature of 850
- I never go
- มันอร่อยไหม
- let's me go
- และจะสื่อสาร
- What you will be doing in june july?
- Conclusions
- ราคาถูก
- ฉันเข้าใจแล้วค่ะ ฉันจะให้เวลากับคุณ ฉันช
- I din't really understand the lyrics. Bu
- You are elgant and distinct
- Oh it's no problem really hehe
- ตำบลวังปลาป้อมอำเภอนาวังจังหวัดหนองบัวลำ
- Wasn't it ?
- ฉันหมายถึงตอนนี้ ที่อังกฤษเย็นแล้ว คุณทา
- ออกแบบบรรจุภัณฑ์
- True
- prick!
