1 / 25

HTML5 and CSS3

Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 9 Embedded Fonts and Multicolumn Layouts. Web Fonts. Font Limitations. Browsers can only display the fonts installed on the device Arial, Verdana, Times, Georgia Custom fonts usually meant using images. Now: @font-face.

karik
Download Presentation

HTML5 and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

  2. Chapter 9Embedded Fonts and Multicolumn Layouts

  3. Web Fonts

  4. Font Limitations • Browsers can only display the fonts installed on the device • Arial, Verdana, Times, Georgia • Custom fonts usually meant using images

  5. Now: @font-face • Instructs the browser to download a font and make it available @font-face { font-family: ‘fontName’; src: url(…); font-weight: weight; font-style: style; }

  6. Font Sources • Specify one or more font sources • Similar to specifying media sources • Let the browser choose the supported format src: url(…) format(‘eot’), url(…) format(‘woff’), url(…) format(‘trutype’)

  7. Font Types • EOT – proprietary font format for IE4-8 • WOFF – Web Open Font Format • OTF – OpenType • TTF – TrueType • SVG – Scalable Vector Graphics (original iPhone) • Compatibility – Table 9.1, caniuse.com

  8. EOT Support • IE browsers before IE9 need to be tricked into using a font src: url(‘font.eot?#iefix’), … • But with IE9+: src: url(‘font.eot’); src: url(‘font.eot?#iefix’), … See http://www.fontspring.com/blog/fixing-ie9-font-face-problems

  9. Font Property Descriptors • @font-face properties, such as font-weight, don’t control the font – they describe the font @font-face { font-family: ‘MyFont’; font-style: normal } @font-face { font-family: ‘MyFont’; font-style: italic }

  10. Unicode Range • Specifies the characters included in the font • May be necessary for specialized fonts or with some languages

  11. Applying the Font • Refer to the font as any other font h1 { font-family: MyFont, sans-serif; } • Fallback fonts may be a good idea

  12. Adding a Font • Let’s add fonts to the HTML Herald page • Add fonts to @font-face

  13. Fonts That Won’t Load • Some browsers (meaning IE) won’t load online fonts for an offline web page • Fonts from other sources, such as Google Fonts, may need to be copied

  14. Legal Considerations • You can’t legally copy any font from your computer and use it on the web • Make sure you are licensed to use your font online • Many online resources for web fonts

  15. Font Squirrel • If you need to create multiple font files, Font Squirrel can help • Upload a single font format, download multiple font formats

  16. Exercise Caution • Downloading fonts can use a lot of bandwidth • Do I need a custom font on mobile devices? • Only include fonts you use • Consider images for rare font use • Can the font size be reduced to only include the characters you need? • Only uppercase, etc.

  17. Multicolumn Layouts

  18. Mimic Newsletter Formats • CSS3 can wrap text into multiple columns column-count column-gap column-width • No columns if not supported

  19. Columns and Height • How do columns wrap if the containing element has a specified height? • Columns are only created when needed • Text overflows out of the last column (use overlow: hidden to hide overflow content) • Use column-fill: balance to evenly spread content across all columns

  20. Column Rules and Breaks • Use column-rule to display a line between columns • Use break-before, break-after, break-inside to prevent column breaks h2 { break-after: avoid } • Use column-span to force an element to span multiple columns

  21. Media Queries

  22. What are media queries? • Conditional CSS that depends on device attributes • Screen vs. print • Display width • Pixel ratio (iOS) • Seen in the <link rel=“stylesheet”> as media=“print”

  23. Target Device Size • Prevent sidebar display if the maximum width of the device is 600px or less @media (max-width: 600px) { .sidebar { display: none; } }

  24. Target Device Orientation • Prevent sidebar display if the device is in portrait mode @media (orientation: portrait) { .sidebar { display: none; } }

  25. Possible Queries • color (bits per pixel for colors) • aspect-ratio, device-aspect-ratio • device-height, device-width • height, width • orientation • resolution • Upcoming queries: • http://dev.w3.org/csswg/mediaqueries4/

More Related