How to Install Operating System ??Complete Guide Installing The Operating System

How To Setting Fonts In CSS

In this article discuss the tutorial – How to setting fonts in CSS. Fonts or letters are visual communication tools, but in writing each paragraph must have a different style on certain points that need to be emphasized or words in a foreign language that needs to be tilted.

Setting CSS fonts in Microsoft Word is very easy to do, users only have to use the Italic, Bold and so on, but what if in CSS? we as programmers are different from managing fonts on CSS even though they can do the same behavior with Microsoft Word, it’s just a different way.

Before going forward, there are a number of articles that you might be looking for.

READ TOO :

Setting Fonts In CSS

In the world of programming and as programmers, we will certainly simplify the codes that are made to arrive at users in a visual form that is easy to read. Likewise in office software, their programmers have simplified their complicated codes for us to use easily.

How To Setting Fonts In CSS
How To Setting Fonts In CSS

To be able to set fonts on CSS, we need to use font properties, where font properties have other properties derived, although font properties can represent other properties, sometimes we don’t need the font properties themselves. The following is a table of font properties that we will discuss.

PropertyInformation
font-familyThe font-family property is used to change the type of font to be used
font-styleFont-style properties are used to determine the font style whether italic or oblique
font-variantFont-variant properties are useful for making small-caps effects.
font-weightTo determine the thickness of the font to be used
font-sizeTo set the size of letters to be used
fontShort properties that can represent other font properties

From the table above, each of our font properties will be discussed in detail. Therefore, after getting to know these properties, the writer hopes that readers will experiment with themselves to develop this CSS syntax.

Set the Font Type in CSS

To be able to set the font on this css the property used is font-family. For example, we want to change the font type like Arial, times a new romance and so on. Here is an example of the code.

<!DOCTYPE html>
<html>
<head>
    <title> CSS Font </title>
    <style type = "text/css">
       p {
          font-family: Arial;
         }
    </style>
</head>
<body>
   <p> This is the font-family type Arial </ p>
</body>
</html>

From the code above a font-family property has an Arial value that is directed to selector p, wherein each paragraph it will display the text in the style of letters or font type Arial. If from the above code to set only one font, then we can set letters by prioritizing one letter, from the three types of letters we give are considered font-family properties.

The purpose of prioritizing one type of letter is intended if the letter that we have declared on CSS is not owned by the computer that accepts our web page, it will automatically change to another font, here is the code.

<style type = "text/css">
   p {
       font-family: 'Arial', Georgia, Serif;
     }
</style>

If you pay attention to the code above, the arial type has quotes, this means that the arial type has been prioritized in CSS on the web page that we have created, but if the client computer that opens our web page is not installed the arial type font will automatically change to font others that are on the client computer.

Set The Font Style In CSS

What is the style of the letter referred to in this tutorial? the letter style in question is like the oblique and oblique style because basically, the default font style that is generated is normal so that the browser reads the font style by using the font-style property, the sample code below will display italics.

<style type = "text/css">
   p {
        font-style: italic;
     }
</style>

The values ​​contained in the font-style property include normal, italic, and oblique. Please and experiment to find out more about using font-style properties.

Set The Font Variant In CSS

If you use office software often, you should often hear the term small caps. Well, in this CSS to set the variant of small-caps, you can use font-variant properties. Example code.

<style type = "text/css">
   p {
        font-variant: small-caps;
     }
</style>

The function of small-caps itself is to arrange letters to be printed in all uppercase letters but with a small size.

Adjusting The Font Thickness In CSS

To be able to set the thickness of letters in CSS use the font-weight property with a bold value, although it can be with integer values ​​like 400, 500 and so on, it depends on whether the font supports that thickness. Example Code.

<style type = "text/css">
   p {
         font-weight: bold;
     }
</style>

This font-weight property actually has more than one value, as said above depending on whether the font supports other types of thickness, but normally it is bold.

Setting Font Size In CSS

To be able to set the font size or font size in CSS, by using the font-size property. We have discussed the unit of measurement in the CSS in the previous tutorial, so I just continue, if anyone hasn’t read it, please look for it in the CSS category.

<style type = "text/css">
   p {
         font-size: 12pt; / * pt is the type of unit of measurement * /
     }
</style>

Using Font Properties In CSS

Font properties can actually represent other properties, but sometimes in some cases, we don’t need them. But it needs to be discussed because it is often used in terms of application development.

font: style variant weight size family;

here’s the complete code example …

<style type = "text/css">
   p{
        font: italic small-caps bold 15px georgia;
    }
</style>

If you pay attention to the values ​​in this font property, it is owned by another property. Font properties do not have to be defined as the syntax above, the font property will read the value according to the given keyword.

So the tutorial on arranging fonts on CSS, hopefully, this tutorial can help and can be useful to the reader.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *