css-tips/font-face.html at master · vanzheng/css-tips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Font face</title>
    <style type="text/css">
    @font-face
    {
        font-family: 'roboto-italic';
        src: url('fonts/roboto-italic.eot'); /* IE9 Compat Modes */
        src: url('fonts/roboto-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('fonts/roboto-italic.woff') format('woff'), /* Modern Browsers */
             url('fonts/roboto-italic.ttf') format('truetype'), /* Safari, Android, iOS */
             url('fonts/roboto-italic.svg#roboto-italic') format('svg'); /* Legacy iOS */
        font-weight: normal;
        font-style: normal;
    }

    body
    {
        font-family: roboto-italic Arial Sans-Serif;
    }
    </style>
</head>
<body>
This is roboto italic font.
</body>
</html>