Download presentation
Presentation is loading. Please wait.
Published byCharity Young Modified over 9 years ago
1
Neal Stublen nstublen@jccc.edu
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- problemshttp://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.
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
22
What are media queries? Conditional CSS that depends on device attributes Screen vs. print Display width Pixel ratio (iOS) Seen in the 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/
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.