Exam Objectives
Apply styles to text appearance (color, bold, italics); apply styles to text font (WOFF and @font-face, size); apply styles to text alignment, spacing, and indentation; apply styles to text hyphenation; apply styles for a text drop shadow
Quick Overview of Training Materials
Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4
MSDN - How to Enhance Your Website's Type Design with CSS3CSS Text, Font, and Text Decoration Properties
The CSS3 Text specification includes the following properties:
- hanging-punctuation (spec) - An as-yet unsupported feature that allows punctuation to be ignored when measuring the line's contents for fit, alignment, or justification. Depending on the line's alignment, this may result in the mark being placed outside the line box or indent. So opening quotes may hang from the beginning of the line, or an ending period or comma may hang from the end.
- hyphens (spec) (MozDN) - Allows control over how hyphens are inserted into line-breaks.
- letter-spacing (spec) - Space between characters. Can be in em, px, or % (of current text height).
- line-break (spec) - Used to specify the rules to use on line-breaks in Chinese, Japanese, and Korean text.
- overflow-wrap (spec) (MozDN) - same as word-wrap, this is the canonnical syntax. Allows specifying long words to be broken that wouldn't normally be breakable.
- tab-size (spec) - Changes the number of spaces in a tab. White-space must be appropriately set or the tab will be collapsed (and thus tab-size will have no effect)
- text-align (spec) - Similar to alignment in a word processor, sets the text to align to the left, right, center, or justify.
- text-align-last (spec) - The same as text-align except it only applies to last or only line of text. Currently only in working draft with spotty implementation.
- text-indent (spec) - Specifies how much horizontal space should be added to the first line of text. Can be em, px, or % (of container width)
- text-justify (spec) - Specifies how to perform justification. Most relevant to Asian languages.
- text-overflow (spec) (MozDN) - Can be specified as clip or ellipsis in browsers with basic support, controls how text that overflows is displayed. Long text specified with ellipsis will show a ... where they are cut off.
- text-transform (spec) (MozDN) - Use the change the capitalization behavior mostly. All uppercase, lowercase, or first letter captialized. Also a "full-width" transform that puts all characters in full-width form (currently only supported in FF)
- white-space (spec) - This property specifies two things: whether white space inside the element is collapsed and whether lines may wrap at unforced soft wrap opportunities. The settings are combinations of wrapping and preserving white space:
- normal - collapse whitespace, wrap text
- pre - preserve whitespace, do not wrap
- nowrap - collapse whitespace, do not wrap
- pre-wrap - preserve whitespace, wrap text
- pre-line - collapse spaces and tabs, preserve line feeds, do not wrap
- word-break (spec) (MozDN) - Specifies how line breaks may be inserted between characters when soft wrapping. Can be used in conjuction with hyphens to insert a hyphen at arbitrary breaks.
- word-spacing (spec) - Similar to letter-spacing except it applies between words instead of characters.
- word-wrap (spec) - another way to specifiy overflow-wrap, retained in current spec (with the stipulation that implementers treat it exactly like overflow-wrap)
The CSS3 Font specification includes these properties:
- *font (spec) - Shorthand property for the following properies:
- font-family (spec) - Specifies a prioritized list of fonts seperated by commas. Fonts are tried from left to right until an installed font is found. Usually a good idea to include a generic font family at the end of the list (san-serif, cursive, etc.) in case none of the prefered fonts are installed.
- font-weight (spec) - (MozDN) Specifies a weight for font glyphs on a 9 point scale from 100 to 900. "Normal" is equivalent to 400, bold to 700. The loaded font must have a glyph set to support the specified wieght, if it does not then the nearest weight is used, with 500+ rounding up and 400- rounding down. According to the spec, "lighter" rounds the inherited font weight down to 100, 400, or 700, and "bolder" rounds the inherited weight up to 400, 700, or 900. MozDN states they go up or down one weight.
- font-style (spec) - This property allows you to specify text as normal, italic, or oblique. If italic or oblique glyphs are not available, then the default fonts will be slanted.
- font-stretch (spec) - Allows you to specify condensed and expanded font faces (which must be part of the effected font family.
- font-size (spec) - Change the size of text. Can be specified in px, em, % (of inherited font size).
- font-kerning (spec) - allows changing the behavior of kerning in text. Kerning is the spacing behavior in non-monospaced text that distribute the characters. "Auto" lets the browser determine kerning, "Normal" applies kerning (if defined in the font) and "None" disables kerning.
- font-size-adjust (spec) - used to tweak the size of fonts so that a fallback font has the same relative size as the preferred font. This is done by specifying this property with the desired aspect value (that is, ratio of upper case to lower case heights)
- font-synthesis (spec) - disables the ability of the browser to create bold and italic fonts when they aren't included in the font face.
- font-variant (spec) - basically supports one value "small-caps" which makes text all caps with actual capital letters displayed bigger. It looks like this. Cheyenne, Wyoming.
- font-feature-setting (spec) (MozDN) - Allows low level access to OpenType features not normally accessible. Used to control ligatures, tabular features, historical forms, small-caps, etc.
- @font-face (spec) (MozDN)- Links to a font resource that can then be specified by the font-family property. Typically includes two descriptor: the source location (src) and the name (font-family) used by font-family to specify the resource. Can also include descriptors for font-variant, font-stretch, font-weight, font-style, and unicode-range.
*line-height is also included, which is part of the visual formatting spec. Determines the spacing between inline elements, so effects the leading on lines of text.
- text-decoration (spec) (MozDN) - draws an underline, overline, or line-through. Also allows specifying "blink" though most modern browsers don't support "blink" any more (or don't show the effect... thank christ). CSS3 specifies this property as a shorthand for the following three properties:
- text-decoration-line (MozDN) - position of line (underline, overline, line-through). Limited browser support.
- text-decoration-style (MozDN) - style of the decoration line (solid, double, dotted, dashed, wavy). Vendor prefixed support.
- text-decoration-color (MozDN) - color of the decoration line. Limited browser support.
- text-decoration-skip (spec) - Specifys which part of the text should be skipped. Can include inline images, spaces, "ink" which is the drawn portion of a glyph (think of the hanging part of y, j, and g), or all of the above.
- text-underline-position (spec) - Indicates the position of the underline. Auto typically puts the line at the alphabetic baseline. Under places the line under all text content. The difference is that auto would place the line through the bottom of hanging letters and certain punctuation, while under would be under the entire glyph. Also includes left and right for vertical languages.
- text-emphasis (spec) - Applies to east asian languages that use emphasis marks.
- text-shadow (spec) (MozDN)- Adds a shadow to text similar to box-shadow, and is specified similarly, with X and Y offset, Blur, and Color.
The following JSFiddle demo shows off many of these properties:
Using @font-face and WOFF fonts
@font-face is used to specify fonts in a site that might not be available on the users local machine. The src descriptor points to a TrueType font (ttf), Web open font format (WOFF), Embedded OpenType (eot, IE only), or OpenType font (otf) file. The font-family descriptor effectively gives this font a name that can be referenced by other CSS properties (particularly the font-family property). One a resource is loaded and named with @font-face, if can be specified as the font-family in other CSS properties. The following example will load the sansation_light.woff font file, which is then applied as font-family: sansation to <p> tags:
@font-face {
font-family: sansation;
src: url(http://www.w3schools.com/cssref/sansation_light.woff);
}
p {
font-family: sansation;
}
Web Open Font Format (WOFF) is a compressed font format similar to TrueType font or OpenType font. It is supported in all modern browsers. It should be noted that for Internet Explorer, the only font file type supported prior to IE9 was Embedded OpenType, which is a proprietary format.
@font-face {
font-family: sansation;
src: url(http://www.w3schools.com/cssref/sansation_light.woff);
}
p {
font-family: sansation;
}
Web Open Font Format (WOFF) is a compressed font format similar to TrueType font or OpenType font. It is supported in all modern browsers. It should be noted that for Internet Explorer, the only font file type supported prior to IE9 was Embedded OpenType, which is a proprietary format.
No comments:
Post a Comment