Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only...
-
Upload
mervin-miller -
Category
Documents
-
view
258 -
download
0
Transcript of Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only...
![Page 1: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/1.jpg)
Text and Fonts in CSS
![Page 2: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/2.jpg)
Customizing fonts
In CSS, fonts are divided into “font families”
Only certain fonts are commonly installed on most computers
Therefore you must be careful in your font choices
![Page 3: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/3.jpg)
Font Size
Font size has a big impact on design and readability of Web pages
There are several ways to specify font sizes with CSS
The size of fonts can be controlled with the font-size property
![Page 4: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/4.jpg)
Font Color, Weight and Style
You can change your text color with the color property
You can give fonts extra weight when needed using the font-weight property
You can add decoration such as overlines, underlines and line-throughs
![Page 5: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/5.jpg)
Font Families
Each font family contains a set of fonts that share common characteristics
There are five font families:Sans-serifSerifMonospaceCursiveFantasy
![Page 6: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/6.jpg)
Sans-Serif Family
Verdana Arial Black Trebuchet MS Arial Tahoma
![Page 7: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/7.jpg)
Serif Family
Times New Roman Georgia Baskerville Bookman Old Style
![Page 8: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/8.jpg)
Monospace Family
Courier New Letter Gothic
![Page 9: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/9.jpg)
Cursive Family
Comic Sans
Freestyle ScriptBradley Hand
![Page 10: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/10.jpg)
Fantasy Family
Impact Copperplate gothic
![Page 11: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/11.jpg)
Summary
Serif fonts have an elegant, traditional look Sans serif fonts have a very clean,
readable look Monospace fonts feel like they were typed
on a typewriter Cursive and fantasy fonts have a playful or
stylized feel
![Page 12: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/12.jpg)
Specifying Font Families in CSS
You can specify more than one font using the font-family property
Type the font name, separated by commasBody { font-family: Verdana, Geneva, Arial,
sans-serif; }
![Page 13: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/13.jpg)
How Font-Family Specifications Work Body { font-family: Verdana, Geneva,
Arial, sans-serif; }
The browser will first check to see if Verdana is available on the computer
If Verdana is not available, the browser will look for Geneva.
If Geneva is not available, the browser will look for Arial.
Finally, if none of the specific fonts can be found, the browser will use whatever is considered the default sans-serif font.
![Page 14: Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.](https://reader036.fdocuments.in/reader036/viewer/2022080922/56649ec45503460f94bcf1b5/html5/thumbnails/14.jpg)
Adjusting Font Sizes
You can specify your font size in pixels font=size: 14px;
You can specify your font size in percentages font-size: 150%
You can specify your font size using “em” which is another relative unit of measure font-size: 1.2em;