-->

CSS font tutorial

CSS font tutorial

CSS font tutorial

CSS font tutorial:

CSS fonts are important in changing and sorting the text size, fonts, thickness, etc. inside the HTML element. There are a number of CSS properties that are widely used for this purpose. Below is an example of them discussed.

Font Family:

Font-family properties can be used to determine what the font of the element will be. Multiple fonts can be comma (,) together. In this case, the browser will look for the first one if it is not found in the system (meaning the font is not installed on your PC) then the next one will look like this .. If one is not found then the first font will apply a font to the family member.

font-family: Verdana, SolaimanLipi;

The font-size can be used to determine the size of the text inside the element. You can give any value with px or em unit e.g.



font-size:18px; /* or */font-size: 2em;

 How many pixels in how many em, if you search on Google, you will find a thousand solutions.

Font-weight can be used to determine how dark the font will look. Its values ​​can be "normal", "bold", "bolder", "lighter", "inherit" and up to 100, 200, 300 ... 900. Most of the time the bold value is used to make the text a little bolder. You can see what the text will look like if you look at the values, or you can try the values ​​in our online editor.

font-weight: bold;

font-style Usually used for italics but 3 more values ​​can be given.

font-style:italic;
font-style:oblique;
font-style:normal;
font-style:inherit;

font-variant The effect of small-caps can be given in the text so that the first letter can be made a little bigger and also normal and inherit values ​​can be given. If it is normal, it will look like it is written and if it is inherited, it will take the time of parent element.

font-variant: small-caps;


Examples of all properties together

<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-family:Verdana,SolaimanLipi;
font-size: 18px;
font-weight: bold;
font-style:italic;
font-variant:small-caps;}
</style>
</head>
<body>
<h1>Myhtmlcode</h1>
<p>Myhtmlcode</p>
</body>
</html>

If you use a font that has a space in its name, then you have to put it inside the quotation, for example


font-family : "Times New Roman";

If you want to use a font that is not a system font, usually not installed on the user's PC

For this problem, a new property called font-face has been introduced in CSS3. With it you can show your text in any font. Usually the site's slogan, name, title, etc. have to use fonts that are not on the user's PC. In the past, this was done using a script called Kufan, but the quality was not good enough, and pictures were also used, which was not the right solution.

First you need to get the font that you want to give. Then you have to make two versions of the font. embedded open type (.eot) and true type font (.ttf)

There are lots of sites online where you can switch from one version to another for free. This has to be done because IE (Internet Explorer) only supports eot and ttf runs on everything else.

Saba needs to use font-face first. That means the first code in the stylesheet is followed by other code.

@font-face {
font-family: 'blok-italic';
src: url('/media/fonts Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('/media/fonts Blokletters Balpen.ttf') format('truetype');}
h1{font-family:blok-italic;}

A little different from writing other rules here is to give that sign first.

The eot format must be used first or it will not work in IE.
Facebook Comments

Follow by Email