CSS - Fonts and texts

*font-family:* Note? Syntax? Properties (6)?

*Note:* The font-family property can hold several font names as a *"fallback" system*. If the browser does not support the first font, it tries the next font. *Syntax:* If a font name contains white-space, it must be quoted. font-family: family-name | generic-family; 1) family-name - The name of a font-family, like "times", "courier", "arial", etc. 2) generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". https://www.w3schools.com/cssref/pr_font_font-family.asp

Cursive Font

'cursive': fonts that emulate handwriting https://www.w3.org/Style/Examples/007/fonts.en.html

Fantasy Font

'fantasy': decorative fonts, for titles, etc. https://www.w3.org/Style/Examples/007/fonts.en.html

Monospase Font

'monospace': fixed-width fonts https://www.w3.org/Style/Examples/007/fonts.en.html

How to create font with compound name?

If the name of the font is compound (two or more words) it is important to take it into quotes

*letter-spacing:* what does? Values (2)? Note?

Increases or decreases the space between characters in a text Note: negative values are allowed. letter-spacing: normal | length; 1) normal - No extra space between characters. This is default 2) length - Defines an extra space between characters (negative values are allowed). https://www.w3schools.com/cssref/pr_text_letter-spacing.asp

*font-size:* Keywords and values? (11) Types of values (3)?

font-size: <absolute-size> | <relative-size> | <length-percentage> <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> = larger | smaller <length-percentage> = <length> | <percentage> <absolute-size> -Absolute-size keywords, based on the user's default font size (which is medium). <relative-size> - relative to parent's font-size <percentage> - relative to parent's font-size https://www.w3schools.com/cssref/pr_font_font-size.asp

*font-style:* Keywords?

font-style: normal | italic | oblique; 1) normal - The browser displays a normal font style. This is default 2) italic - The browser displays an italic font style 3) oblique <angle> - The browser displays an oblique font style (firefox only) https://developer.mozilla.org/en-US/docs/Web/CSS/font-style https://www.w3schools.com/cssref/pr_font_font-style.asp

*font-weight:* Keywords and values? (5) Number keyword equivalents?

font-weight: normal | bold | bolder | lighter | number (100-900) 1) normal - 400 2) bold - 700 3) bolder - 4) lighter - https://www.w3schools.com/cssref/pr_font_weight.asp

*text-shadow:* values and their order? (5) Note?

*Note:* To add more than one shadow to the text, add a comma-separated list of shadows. text-shadow: h-shadow v-shadow blur-radius color; 1) h-shadow - Required. The position of the horizontal shadow. Negative values are allowed 2) v-shadow - Required. The position of the vertical shadow. Negative values are allowed 3) blur-radius - Optional. The blur radius. Default value is 0 4) color - Optional. 5) none - Default. https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

*text-decoration:* what is? Order of properties? Notes? Line types (3)? Styles (5)?

*Note:* only line is required. text-decoration: text-decoration-line text-decoration-color text-decoration-style; 1) text-decoration-line - (underline, overline, line-through) 2) text-decoration-color - color of line 3) text-decoration-style - Sets the style of the text decoration (solid, wavy, dotted, dashed, double) https://www.w3schools.com/cssref/pr_text_text-decoration.asp

*eot* decipher abbreviation? Syntax for format? Support?

1) Embedded Open Type 2) format('embedded-opentype') 3) Supported only in Edge

@font-face *local()* what does? Why used? Syntax?

1) It's common to use both url() and local() together. If the local() function is provided, user's installed copy of the font is used. Otherwise, the font resource specified using the url() function is downloaded and used. EX: In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead: @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

*otf* decipher abbreviation? Syntax for format? Support?

1) Open Type Font 2) format('opentype') 3) Supported everywhere

*svg* decipher abbreviation? Syntax for format? Support?

1) Scalable Vector Graphics 2) format('svg') 3) Not supported in Edge and Firefox Note: SVGZ is the zipped version of SVG.

*ttf* decipher abbreviation? Syntax for format? Support?

1) True Type Font 2) format('truetype') 3) Supported everywhere

*woff* decipher abbreviation? Syntax for format? Support?

1) Web Open File Format 2) format('woff') 3) Supported everywhere

*woff2* decipher abbreviation? Syntax for format? Support?

1) Web Open File Format 2 2) format('woff2') 3) Not supported in Edge and Safari

How to use quotes (2)?

1) Wrap element into <q> tags 2) Use open-/close-quote on pseudo-elements https://css-tricks.com/almanac/properties/q/quotes/

*@font-face* advanced syntax (7)?

@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] }

*@font-face* basic syntax? Link syntax? Link note?

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } Note: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

Sans-Serif Font

A style of text that lacks hooks (or feet) on the ends of the letters. Most desirable for projection since the text is easier to read https://www.w3.org/Style/Examples/007/fonts.en.html

What is *aspect value*? How it is important when using fonts?

All fonts have an "aspect value" which is the size-difference between the lowercase letter "x" and the uppercase letter "X". When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. When the browser knows the "aspect value" for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.

*text-transform:* what does? Keywords (4)?

Controls the capitalization of text text-transform: none | capitalize | uppercase | lowercase; 1) none - No capitalization. The text renders as it is. This is default 2) capitalize - Transforms the first character of each word to uppercase 3) uppercase - Transforms all characters to uppercase 4) lowercase - Transforms all characters to lowercase https://www.w3schools.com/cssref/pr_text_text-transform.asp

What if I need the same font in different variations?

Just add extra @font-face for different font variants EX: @font-face { font-family: 'GillSansFF'; src: url('fonts/GillSans.eot'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GillSansFF'; src: url('fonts/GillSans-light.eot'); font-weight: lighter; font-style: normal; }

What if I need to use more than one *font format*? Syntax?

Just list all the src through comma and add format tag. EX: src: url('fonts/GillSans.woff') format('woff'), url('fonts/GillSans.ttf') format('truetype');

*text-align:* Keywords (4)? Notes?

Note: *default* left if direction is ltr, and right if direction is rtl text-align: left | right | center | justify; 1) left 2) right 3) center 4) justify - Stretches the lines so that each line has equal width (like in newspapers and magazines) https://www.w3schools.com/cssref/pr_text_text-align.asp

*color:* what does?

Sets the color of text

*line-height:* what does? Values (4)? Notes?

Sets the line height Note: Negative values are not allowed. line-height: normal | number | length | %; 1) normal - A normal line height. This is default 2) number - A number that will be multiplied with the current font-size to set the line height 3) length - A fixed line height in px, pt, cm, etc. 4) % - A line height in percent of the current font size https://www.w3schools.com/cssref/pr_dim_line-height.asp

*text-overflow:* what does? Keywords (3)? Requirements to work?

Specifies how overflowed content that is not displayed should be signaled to the user Both of the following properties are required for text-overflow: - white-space: nowrap; - overflow: hidden; text-overflow: clip | ellipsis | string; 1) clip - Default value. The text is clipped and not accessible 2) ellipsis - Render an ellipsis ("...") to represent the clipped text 3) string - Render the given string to represent the clipped text https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

*white-space:* what does? Keywords (5)?

Specifies how white-space inside an element is handled white-space: normal | nowrap | pre | pre-line | pre-wrap; 1) normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default 2) nowrap - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered 3) pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML 4) pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks 5) pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks https://www.w3schools.com/cssref/pr_text_white-space.asp

*text-indent:* what does? Values (2)? Note?

Specifies the indentation of the first line in a text-block Note: Negative values are allowed. The first line will be indented to the left if the value is negative. text-indent: length | %; 1) length - Defines a fixed indentation in px, pt, cm, em, etc. *Default value is 0.* 2) % - Defines the indentation in % of the width of the parent element https://www.w3schools.com/cssref/pr_text_text-indent.asp

*direction:* what does? Keywords (2)?

Specifies the text direction/writing direction *can also be applied to blocks* https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction: ltr | rtl; 1) ltr - Text direction goes from left-to-right. This is default 2) rtl - Text direction goes from right-to-left.

*unicode-range:* what does? Purpose? Syntax (4)?

The *unicode-range* CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded. The *purpose* of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth. *wildcard range* A range of Unicode code points containing wildcard characters, that is using the '?' character, so for example U+4?? means include all characters in the range U+400 to U+4FF. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

*font:* what is? Order of properties (6)? Keywords (6)?

The font property is a shorthand property for: *font: font-style font-variant font-weight font-size/line-height font-family;* Except those properties, font can specify particular keywords. font: caption | icon | menu | message-box | small-caption | status-bar; 1) caption - Uses the font that are used by captioned controls (like buttons, drop-downs, etc.) 2) icon - Uses the font that are used by icon labels 3) menu - Uses the fonts that are used by dropdown menus 4) message-box - Uses the fonts that are used by dialog boxes 5) small-caption - A smaller version of the caption font 6) status-bar - Uses the fonts that are used by the status bar

*font-kerning:* what does? Note? What is kerning? Keywords (3)?

The font-kerning CSS property sets the use of the kerning information stored in a font. Note: For fonts that do not include kerning data, this property will have no visible effect. Kerning defines how letters are spaced. In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be. In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: font-kerning: auto | normal | none; 1) auto - Default. The browser determines whether font kerning should be applied or not 2) normal - Specifies that font kerning is applied 3) none - Specifies that font kerning is not applied https://www.w3schools.com/cssref/css3_pr_font-kerning.asp

*font-stretch:* what does? Note? Keywords (9) and their order?

The font-stretch property allows you to make text wider or narrower. Note: The font-stretch property will not work on just any font! It will only work if the font family has width-variant faces. The font-stretch property itself does not stretch a font. font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded; https://www.w3schools.com/cssref/css3_pr_font-stretch.asp

*font-variant:* what does? Keywords (2)?

The font-variant property specifies whether or not a text should be displayed in a small-caps font. font-variant: normal | small-caps; 2) *small-caps* - The browser displays a small-caps font https://www.w3schools.com/cssref/pr_font_font-variant.asp

*hyphens:* what does? When used? How used? Keywords (3)?

The hyphens property defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text. hyphens: none | manual | auto; 1) none - Words are not hyphenated 2) manual - Default. USE: Words are only hyphenated at *&hyphen; or &shy*; (if needed) 3) auto - Words are hyphenated where the algorithm is deciding (if needed) https://www.w3schools.com/cssref/css3_pr_hyphens.asp

*shape-image-threshold:* what does? Example?

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape *using an image as the value for shape-outside.* shape-image-threshold: <number>; https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold

*shape-margin:* what does? Example?

The shape-margin CSS property sets a margin for a CSS *shape created using shape-outside.* shape-margin: <length-percentage>; https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin

*shape-outside:* what does? Values (4)?

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. shape-outside: none | <shape-box> || <basic-shape> | <image> 1) none - *Default* 2) <shape-box> - border-box | padding-box | content-box | margin-box 3) <basic-shape> - The float area is computed based on the shape created by of one of inset(), circle(), ellipse(), or polygon(). 4) <image> - The float area is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold. https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

*text-align-last:* what does? Note? Keywords (7)?

The text-align-last property specifies how to align the last line of a text. Note: In Edge/Internet Explorer the text-align-last property only works on text that has "text-align: justify". text-align-last: auto | left | right | center | justify | start | end; 1) auto - Default value. The last line is justified and aligned left 2-4) left | right | center - The last line is aligned to the ______ 5) justify - The last line is justified as the rest of the lines 6) start - The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left) 7) end - The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is right-to-left) https://www.w3schools.com/cssref/css3_pr_text-align-last.asp

*text-emphasis:* what does? Note? 9 styles?

The text-emphasis CSS property applies emphasis marks to text. It is a shorthand for *text-emphasis:* text-emphasis-style text-emphasis-color; *Note:* Unlike text-decoration it takes up space - about 50% of the size of the font. So, text-emphasis may affect line height when the current leading is not enough for the marks. Styles: 1) none 2) filled - The shape is filled with solid color. If neither filled nor open is present, *this is the default.* 3) open - The shape is hollow. 4) dot - The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6). 5) circle - The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB). *This is the default shape in horizontal writing modes* 6) double-circle - The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE). 7) triangle - The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3). 8) sesame - The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46). *This is the default shape in vertical writing modes* 9) <string> - Display the given string as marks. *Authors should not specify more than one character in <string>.* https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis

*text-emphasis-position:* Keywords (4)?

The text-emphasis-position CSS property sets where emphasis marks are drawn. text-emphasis-position: over | under | right | left

*text-justify:* what does? Keywords (4)?

The text-justify property specifies the justification method of text when text-align is set to "justify". text-justify: auto | inter-word | inter-character | none; 1) auto - The browser determines the justification algorithm 2) inter-word - Increases/Decreases the space between words 3) inter-character - Increases/Decreases the space between characters 4) none - Disables justification methods https://www.w3schools.com/cssref/css3_pr_text-justify.asp

*vertical-allign:* what does? Values (10)?

The vertical-align property sets the vertical alignment of an element. vertical-align: baseline | length | % | sub | super | top | text-top | middle | bottom | text-bottom; 0) baseline - The element is aligned with the baseline of the parent. *This is default* 1) length - Raises or lower an element by the specified length. Negative values are allowed. 2) % - Raises or lower an element in a percent of the "line-height" property. Negative values are allowed 3) sub - The element is aligned with the subscript baseline of the parent 4) super - The element is aligned with the superscript baseline of the parent 5) top - The element is aligned with the top of the tallest element on the line 6) text-top - The element is aligned with the top of the parent element's font 7) middle - The element is placed in the middle of the parent element 8) bottom - The element is aligned with the lowest element on the line 9) text-bottom - The element is aligned with the bottom of the parent element's font https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

*word-break:* what does? Keywords (4)? Used

The word-break property specifies how words should break when reaching the end of a line. word-break: normal | break-all | keep-all | break-word; 1) normal - Default value. Uses default line break rules 2) break-all - *breaks any word that at the end of the line that does not fit* 3) keep-all - Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal" 4) break-word - *breaks only very long words that don't fit the line* Used This value is often used in places with user generated content so that long strings don't risk breaking the layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems. https://www.w3schools.com/cssref/css3_pr_word-break.asp

*word-spacing:* what does? Values (2)?

The word-spacing property increases or decreases the white space between words. word-spacing: normal | length; 1) normal - Defines normal space between words (0.25em) . *This is default* 2) length - Defines an additional space between words (in px, pt, cm, em, etc). Negative values are allowed. https://www.w3schools.com/cssref/pr_text_word-spacing.asp

*word-wrap:* what does? Keywords (2)?

The word-wrap property allows long words to be able to be broken and wrap onto the next line. word-wrap: normal|break-word; 1) normal - Break words only at allowed break points 2) break-word - *breaks only very long words that don't fit the line* https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

*writing-mode:* what does? Keywords (3)?

The writing-mode property specifies whether lines of text are laid out horizontally or vertically. writing-mode: horizontal-tb | vertical-rl | vertical-lr; 1) horizontal-tb - Let the content flow horizontally from left to right, vertically from top to bottom 2) vertical-rl - Let the content flow vertically from top to bottom, horizontally from right to left 3) vertical-lr - Let the content flow vertically from top to bottom, horizontally from left to right https://www.w3schools.com/cssref/css3_pr_writing-mode.asp

*unicode-bidi:* what does? Keywords (3)?

Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document unicode-bidi: normal | embed | bidi-override; 1) normal - The element does not open an additional level of embedding. *This is default* 2) embed - For inline elements, this value opens an additional level of embedding 3) bidi-override - *For inline elements, this creates an override*. For block elements, this creates an override for inline-level descendants https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp

*font-size-adjust:* what does? Keywords (2)? Support?

When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property. font-size-adjust: number | none; 1) number - Defines the aspect value to use 2) none - Default value. No font size adjustment *Supported only in Mozilla* https://www.w3schools.com/cssref/css3_pr_font-size-adjust.asp

Serif Font

a style of text that contains hooks (or feet) on the ends of the letters. Use sparingly if at all for projection https://www.w3.org/Style/Examples/007/fonts.en.html

*quotes:* values (2)?

quotes: none | [ <string> <string> ]; 1) none - 2) [ <string> <string>] - The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on. EX: quotes: "«" "»"; quotes: "«" "»" "‹" "›"; https://developer.mozilla.org/en-US/docs/Web/CSS/quotes