Ví dụ về thuộc tính font

Thuộc tính font

Thuộc tính font: dùng để định dạng các dạng font ngoài dạng đã được định nghĩa ở css2.

HTML viết:

<html>
<head></head>
<body>
<p>Su dung font trong css3</p>
<p class="addFont">Su dung font trong css3</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Su dung font trong css3

Su dung font trong css3

CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vkorin.ttf');
}

p.addFont {
    font-family: 'myFont';
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

Su dung font trong css3

Thuộc tính font-style

Thuộc tính font-style: Xác định loại cho font chữ.

CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vkorin.ttf');
    font-style: normal;
}

@font-face {
    font-family: 'myFont';
    src: url('vkorin-italic.ttf');
    font-style: italic;
}

p.addFont {
    font-family: 'myFont';
    font-style: italic;
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

Su dung font trong css3

Khi font-style đã được khai báo, chúng ta hoàn toàn có thể sử dụng như trong css2.

Thuộc tính font-weight

Thuộc tính font-weight: Xác định font đậm hay không.

CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vkorin.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'myFont';
    src: url('vkorin-bold.ttf');
    font-weight: bold;
}

p.addFont {
    font-family: 'myFont';
    font-weight: bold;
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

Su dung font trong css3

Khi font-weight đã được khai báo, chúng ta hoàn toàn có thể sử dụng như trong css2.

Thuộc tính unicode-range

Thuộc tính unicode-range: Xác định phạm vi của các ký tự unicode được hỗ trợ.

CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vkorin.ttf');
    unicode-range: U+0020-U+007e;
}

p.addFont {
    font-family: 'myFont';
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

Su dung font trong css3