[CSS] refresher study notes (font style attributes)

CSS font style attributes


A, font-size: font size
This attribute may be used relative length unit (recommended), the absolute length units may also be used, we recommend the pixel unit px.

The relative length unit described
em with respect to the current font size of the text objects
px pixels (recommended)
absolute length units described
in inches
cm centimeter
mm millimeter
pt Point

Tip: Google browser's default font size is 16 px.

[Sample Code]
   <style>
    P {
        font-size: 16px;
    }

    </style>

Two, font-family: Font
This attribute is used to set the font, the font used in the page have italicized (Comparative suitable for printing), Microsoft elegant black, bold and the like.

[Sample Code]
   <style>
    * {
        / * font-Family: "Microsoft yahei"; * /
        font-Family: "YaHei the Microsoft", Arial;
    }
    </ style>

Tips:

  • 1, the page is now commonly used 14px +;
  • 2, to make use of an even number of digital font size, or older browser with odd prone to bug;
  • 3, must be a comma-separated state between the English variety of fonts;
  • 4, Chinese fonts need to be quoted in the English state, English fonts generally does not require quotation marks when you need to set the English font, the font name must be in English before the Chinese font name.
  • 5, if the font name contains spaces, *, #, $, \ and other symbols, the font must be added to a single or double quotes in the English state;
  • 6, try using the default font exercises, to ensure that can be displayed in any normal user's browser;
  • 7, if there is more than one font, one by one according to a priority system to find, if you can not find one (written questions / browser compatibility), then use the browser default font;


CSS Unicode encoding
used in the CSS code to directly write Unicode font name to avoid some browsers do not recognize the problem so that it can be resolved correctly.

Chinese name English name unicode
Times New Roman SimSun \5B8B\4F53
Blackbody SimHei \9ED1\4F53
Times New Roman NSimSun \65B0\5B8B\4F53
Italics KaiTi \ 6977 \ 4F53
Microsoft Jhenghei microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
Microsoft elegant black Microsoft YaHei \ 5FAE \ 8F6F \ 96C5 \ 9ED1

Three, font-weight: font weight
bold font and b except strong labels, but also can be implemented using CSS, but there is no semantic CSS.
normal: normal font (not bold), equivalent to 400
Bold: bold, equivalent to 700
Bolder: Special bold
lighter: Serif
number: 100/200/300 ... 900 (recommended numbers, resolve them faster )

[Sample Code]

   <style>
    a{
        /*font-weight: bold;*/
        font-weight: 700; /* 没有单位 == bold */
    }
    </style>


Four, font-style: font style
italic except by i and em tags may also be used to achieve CSS, but there is no semantic CSS.
normal: normal font (italic variations allow normal)
Italic: Italic

[Sample Code]

   <style>
    em{
        color:skyblue;
        font-style: normal;
    }
    </style>


 

Released 2018 original articles · won praise 3957 · Views 10,350,000 +

Guess you like

Origin blog.csdn.net/zhongguomao/article/details/104581519