The following table summarizes the text styles in typeface Some of the settings for :

Property name explain CSS edition
font-size Set the font size 1
font-variant Set whether the English font is converted to small uppercase 1
font-style Set whether the font is slanted 1
font-weight Set whether the font is bold 1
font-family Set up font typeface 1
font Set font style compound writing 1 ~ 2
@font-face Set up Web typeface 3

The attribute names in the table all have one feature , That is to say, it's all based on font start , Explain that these attributes are for Fonts , Here's how to use .


p {
font-size: 50px;

explain : This property is used to set the font size , In addition to using custom sizes , There are also some preset values , The values in the table below are available for reference .

value explain
xx-small Set font size . Each value is fixed from small to large .
The specific value is actually defined by the browser , There may be differences between browsers , So it's less used .
smaller Set the font size relative to the parent element font
Numbers +px

Use CSS Pixel length sets the font size

It's not limited to px, Other units of measure can also be used

Numbers +% Use the percentage size of the font relative to the parent element

Right here smaller and larger To illustrate , First , These two values are going to take effect , After setting the font size of its parent element , Using the parent element as a reference , Get the relative size .

// Set the font size of the parent element first 
body {
font-size: 50px;
// Set it a little bit smaller
p {
font-size: smaller;

And it's relatively small , These are also defined by browsers .


It's clear in the form , This property is only valid for English letters , The following values are available .

value explain
normal If it is in small capital , Put it back in lowercase
small-caps Let lower case letters appear in smaller upper case letters

Let's start with small-caps, In fact, it is to convert all lowercase letters into uppercase letters , So called small capitals , That is, capitalization does not change the size of the font , Does not affect the original size of letters . The specific effect is as follows :


When not set :

After setting :

span {
font-variant: small-caps;

See here , I think you should know what it means Small capital letter 了 .

Go on normal This value , The application scenario of this value is that the parent element has been set first small-caps This is worth , But its child elements I don't want to use small-caps The effect of this value is shown , You can use normal The default effect is restored .

// Let the parent set small capitalization first 
body {
font-variant: small-caps;
} // Let the child element settings revert to lowercase
span {
font-variant: normal;


This property sets whether the font is tilted , You can choose from the following values .

value explain
normal Let the tilt state return to normal
italic It means to use italics
oblique Let the text slant . The difference is used when there is no italics
p {
font-style: italic;

explain :normal Same as above , No more . Here under oblique, This value is usually used when the font file is not italicized , Most Chinese fonts installed by users are italicized , It may be used in other languages , But not much .


Set whether the font is bold or thin , You can choose from the following values :

value explain
normal Let bold font return to normal
bold Let bold font return to normal
bolder Thicker Fonts
lighter Light and Thin Fonts
100 ~ 900 Number between 600 And then it's bold , Not bold before

p {
font-weight: bold;

explain : Use lighter, It will make the font thinner than normal , however bold and bolder The effect is the same , Browsers don't show the difference .


Set the name of the font to use , Of course, this font should be installed by the user , Otherwise it doesn't work .

p {
font-family: Microsoft YaHei ; /* Declare only one font , If the user does not install , It doesn't work */
} p {
font-family: Regular script , Microsoft YaHei , Song style ; /* Use Alternate Fonts , We'll look for , Which one to look for, which one to use */


You can use an attribute , Set all the above effects , The valid values are the same .

p {
font: 50px Regular script ;

explain : The format is like this :[ Is it inclined | Is it bold | Whether to convert to small capitalization ] font size Font name ;[] For optional ,| Represents used to separate options , It's not about | Write in .


In order to prevent your own fonts from being installed on the client , The difference between the actual effect and the design , The corresponding font can be provided on the server .

@font-face {
font-family: abc; /* Alias the provided font for easy reference */
src: url('BrushScriptStd.otf'); /* The path of the font file on the server */
} p {
font-size: 50px;
font-family: abc; /* Use aliases when referencing */

Actually css It's easy to mix the font attribute and text style attribute in , Because they're all about words , Now I'll summarize what some font attributes can be set :

1. font size , specific

2. Weird case , There are also case settings in text styles , But the special effect of setting the case of a font is small capital letters

3. The words are bold , specific

4. The text is slanted , specific

5. Font control , specific

In fact, to sum up , The only place where font attributes and text style attributes really overlap is case , But because the behavior of font level case is very strange , Not in line with our normal expectations , So it's a good distinction .

And the effect of sensation , Text attributes are mainly used to set some very basic things , The text style attribute is used for various effect level display .

5.css More about Fonts

  1. CSS Font properties

    Article transferred from : For more professional articles, please go to : Web design CSS Font properties Font name properties (font-family) ...

  2. css Font style (Font Style), attribute

    css Font style (Font Style), attribute   css Font style (Font Style) It is one of the indispensable style attributes in web pages , With font styles , Only in this way can our web pages become more beautiful , Therefore, the font style attribute becomes every designer ...

  3. Css Font Chinese English comparison table

    css Font Chinese . english .Unicode A comparison table Also note : Traditional Chinese font name , It can't be recognized in simplified Chinese system . Chinese name English name Unicode Unicode 2 Mac OS Chinese is fine and black STHeiti L ...

  4. css Font settings

    css Font settings .selector{ font-family:"Microsoft YaHei", Microsoft YaHei ,"MicrosoftJhengHei", Chinese is fine and black ,S ...

  5. 2.css Font units

    This issue is about css Font units There are three types of font units :px.em.rem The default font height of any browser is 16px. All unadjusted browsers conform to : 1em=16px. % percentage in Inch cm centimeter mm mm e ...

  6. Css - The fonts icon

    Css - The fonts icon Font format ttf.otf.woff.svg.eot Now it's popular to make icons into vector font format documents , When many users zoom in on the page, the icons in the normal image format on the page will become blurred , This font icon is on the web page ...

  7. CSS typeface (font) example

    CSS typeface (font) example CSS The font property defines the font family of the text . size . In bold . style ( Such as italic ) And deformation ( Such as small capital letters ).CSS Font Series in CSS in , There are two different types of font family names : Universal font series - Embrace ...

  8. css Font Chinese English comparison table ( turn )

      stay css In file , We often see some font names become garbled , This is because web developers have written the name of the Chinese font directly into Chinese , and css The file itself does not declare character encoding , There is a garbled code when checking . In order to avoid this kind of garbled situation , Can be css writing ...

  9. css Font style settings

    css Font style (Font Style), attribute Time :2014-05-08 21:49 source : I love learning net | author : I love learning net | This article has already affected  68353 people   css Font style (Font Style) ...

  10. css Making and using font icons .

    css Making and using font icons . In the process of project development , We often use icons . But when we use these icons , Distortion is often encountered , And if there are a lot of pictures , The slower the page loads . therefore , We can use the font icon to display the graph ...

Random recommendation

  1. css3 Implementation of loop execution animation , And the animation has a delay every time

    One . Final effect demand :gift Small animation of the picture 2s Do it once . Demand is a word , Let's look at the implementation process . Two . Implementation process 1. Web page structure <!DOCTYPE html> <html lang=&q ...

  2. Cocos2d-x 3.2 Learning notes ( Two ) Create a custom project

    One . Create projects with commands After setting up the environment ahead , How to create your own cocos2d-x What about the project ? First look at it. cocos2dx 3.2 Let's go to your catalog ( involves 3.1.1 Version of , Please automatically correspond to 3.2 edition ,3.x The environment of the version is the same ...

  3. [POJ1068]Parencodings

    [POJ1068]Parencodings Test description Let S = s1 s2...s2n be a well-formed string of parentheses. S can be enco ...

  4. Based on a HTML5 Of Web 3D development tool

    Before we assist our customers in 3D In the process of application development , The biggest headache for customers is how to learn to use it in a short time TWaver 3D engine , And the use of TWaver 3D To create and import the various 3D business model . Because the project covers a wide range of industries . ...

  5. NAND flash and NOR flash The difference is explained in detail

    The smart phones we use have only one available space ( Such as apple 8G.16G etc. ), One more RAM Capacity , A lot of people don't really know , Why do you need two such chips for storage , That's what we're going to talk about next . These two kinds of storage devices are collectively referred to as “FLASH ...

  6. typedef In depth analysis of

    typedef It's a keyword that we often use , And this keyword has many pitfalls or places that we don't understand deeply . A lot of books are written in a very simple way , It doesn't really make us understand this keyword . In this paper, it is explained in detail . Comprehensive network to find ...

  7. util Study

    const I = 3.4893589; console.log(Number.parseInt(I)); console.log(Number.parseFloat(I)); console.log ...

  8. poj 1068 Parencodings simulation

    Enter each ' )  ' How many years ago ' (  ', We strive for every ' ) ' How many years ago ' )  ', My method is to restore the original image , Go looking for ')'. use . . #include<stdio.h> #incl ...

  9. Share it JS Front end closure interview questions

    Output the result of the following code function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n);//[1] } } } v ...

  10. JavaScript The default behavior of DOM2 level , Event delegation mechanism

    1. Event default behavior and blocking method    1.1 Browser default behavior       JavaScript The properties of the event itself , for example a The jump of the tag ,Submit Button submit , Right-click menu , Text box input, etc .    1.2 ...