CSS provides a wide range of properties to control the characteristics of fonts used on web pages. Here are some of the font characteristics that can be controlled using CSS:
- Font family: The specific typeface used for the text.
- Font size: The size of the font in pixels, ems, or other units of measurement.
- Font style: Whether the font is normal, italic, or oblique.
- Font weight: The thickness of the font, ranging from 100 (thin) to 900 (bold).
There are several font families that are commonly used on the web, as they are widely available and provide good readability on a variety of devices and screen sizes. Some of the most commonly used font families include:
-
Arial, sans-serif: A sans-serif font that is commonly used for its clean, modern look and excellent readability.
-
Times New Roman, serif: A serif font that is commonly used for its traditional look and readability, particularly in printed materials.
-
Verdana, sans-serif: A sans-serif font that is specifically designed for use on the web, with a high level of clarity and legibility even at small sizes.
These are just a few examples of commonly used font families, but there are many other options available depending on the design goals and requirements of a particular project.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</div>
</div>
</body>
</html>
Our simple html code.
p {
width: 400px;
font-family: Arial;
}
This CSS code sets the width of all <p> elements to 400 pixels and specifies the font family as Arial. The width property sets the width of the content area of an element, while the font-family property sets the font family used for the text within an element.
In this case, all paragraphs will have a fixed width of 400 pixels, and the text within each paragraph will be displayed in the Arial font. This can be useful for ensuring consistent typography across a website or application, and for specifying a preferred font family that is appropriate for the content being displayed.
p {
width: 400px;
font-family: "Times New Roman", Arial, Verdana;
}
In this case, the browser will first try to use the Times New Roman font for the text within each paragraph. If Times New Roman is not available, the browser will try to use the Arial font. If Arial is also not available, the browser will try to use the Verdana font. This is useful because it allows for a fallback font in case the preferred font is not available on a particular user's device.
It's worth noting that font family names with multiple words or spaces, such as "Times New Roman", need to be wrapped in quotation marks in CSS to ensure that the browser interprets them correctly.
No comments:
Post a Comment