WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Fonts


The CSS textual style properties characterize the text style family, strength, estimate, and the style of a text.


Difference Between Serif and Sans-serif Fonts

Serif versus Sans-serif

CSS Font Families Property

In CSS, there are two kinds of text style family names:

  • generic family - a gathering of text style families with a comparative look (like "Serif" or "Monospace")
  • font family - a particular textual style family (like "Times New Roman" or on the other hand "Arial")
Generic family Font family Description
Serif Times New Roman
Georgia
Serif textual styles have little lines at the finishes on some characters
Sans-serif Arial
Verdana
"Sans" implies without - these text styles don't have the lines at the closures of characters
Monospace Courier New
Lucida Console
All monospace characters have the equivalent width

Font Family

The text style family property determines the textual style for a component.

The textual style group of a content is set with the font-family property.

The font-family property should hold a few text style names as a "fallback" framework. On the off chance that the program does not bolster the primary textual style, it attempts the following text style, thus on.

Start with the text style you need, and end with a conventional family, to let the program pick a comparative textual style in the nonexclusive family, if no different textual styles are accessible.

Note: If the name of a textual style family is more than single word, it must be in quotes, as: "Times New Roman".

More than one textual style family is determined in a comma-isolated list:

Example

p {
    textual style family: "Times New Roman", Times, serif;
}
Try it yourself »

Font Style

The font-style property is for the most part used to determine italic text.

This property has three values:

  • normal - The content is appeared/li>
  • italic - The content is appeared in italics
  • oblique - The content is "leaning" (sideways is fundamentally the same as italic, however less supported)

Example

h2.normal {
    text style: normal;
}

p.italic {
    text style: italic;
}

h2.oblique {
    text style: oblique;
}
Try it yourself »

Font Size

The font-size property sets the span of the text.

Being ready to deal with the content size is imperative in website composition. Be that as it may, you ought not utilize text dimension changes in accordance with make passages look like headings, or headings look like paragraphs.

Always utilize the best possible HTML labels, as <h1> - <h6> for headings and <p> for paragraphs.

The text dimension esteem can be a flat out, or relative size.

Absolute size:

  • Sets the content to a predetermined size
  • Does not enable a client to change the content size in all programs (awful for openness reasons)
  • Absolute estimate is valuable when the physical size of the yield is known

Relative size:

  • Sets the size with respect to encompassing elements
  • Allows a client to change the content size in browsers

Set Font Size With Pixels

Setting the content size with pixels gives you full authority over the content size:

Example

p {
    text dimension: 40px;
}

h2 {
    text dimension: 30px;
}

p {
    text dimension: 14px;
}
Try it yourself »

Set Font Size With Em

To enable clients to resize the content (in the program menu), numerous designers use em rather than pixels.

The em estimate unit is suggested by the W3C.

1em is equivalent to the present text dimension. The default content size in programs is 16px. In this way, the default size of 1em is 16px.

The size can be determined from pixels to em utilizing this equation: pixels/16=em

Example

h1 {
    text dimension: 2.5em;/* 40px/16=2.5em */
}

h2 {
    text dimension: 1.875em;/* 30px/16=1.875em */
}

p {
    text dimension: 0.875em;/* 14px/16=0.875em */
}
Try it yourself »

In the precedent over, the content size in em is equivalent to the past model in pixels. Be that as it may, with the em measure, it is conceivable to alter the content size in all browsers.

Unfortunately, there is as yet an issue with more seasoned forms of IE. The content winds up bigger than it ought to at the point when made bigger, and littler than it should when made smaller.


Use a Combination of Percent and Em

The arrangement that works in all programs, is to set a default text dimension in percent for the <body> element:

Example

body {
    text dimension: 100%;
}

h1 {
    text dimension: 2.5em;
}

h2 {
    text dimension: 1.875em;
}

p {
    text dimension: 0.875em;
}
Try it yourself »

Font Weight

The font-weight property determines the heaviness of a font:

Example

h2.normal {
    textual style weight: normal;
}

h2.thick {
    textual style weight: bold;
}
Try it yourself »

Font Variant

The font-variant property determines regardless of whether a content ought to be shown in a little tops font.

In a little tops textual style, every single lowercase letter are changed over to capitalized letters. Be that as it may, the changed over capitalized letters shows up in a littler text dimension than the first capitalized letters in the text.

Example

p.normal {
    textual style variation: normal;
}

p.small {
    textual style variation: little caps;
}
Try it yourself »