Scribd Logo
Upload

Welcome to Scribd!

  • CSS Fonts

    Uploaded by

    Lukman Hakim
    12 views9 pages
    cbxcnb

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    cbxcnb

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views9 pages

    CSS Fonts

    Uploaded by

    Lukman Hakim
    cbxcnb

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    CSS Fonts

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    p.serif {

    font-family: "Times New Roman", Times, serif;

    p.sansserif {

    font-family: Arial, Helvetica, sans-serif;

    </style>

    </head>

    <body>

    <h1>CSS font-family</h1>

    <p class="serif">This is a paragraph, shown in the Times New Roman


    font.</p>

    <p class="sansserif">This is a paragraph, shown in the Arial font.</p>

    </body>

    </html>
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    p.normal {

    font-style: normal;

    p.italic {

    font-style: italic;

    p.oblique {

    font-style: oblique;

    </style>

    </head>

    <body>

    <p class="normal">This is a paragraph in normal style.</p>

    <p class="italic">This is a paragraph in italic style.</p>


    <p class="oblique">This is a paragraph in oblique style.</p>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    h1 {

    font-size: 40px;

    h2 {

    font-size: 30px;

    p{

    font-size: 14px;

    </style>

    </head>

    <body>
    <h1>This is heading 1</h1>

    <h2>This is heading 2</h2>

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    h1 {

    font-size: 2.5em; /* 40px/16=2.5em */

    h2 {

    font-size: 1.875em; /* 30px/16=1.875em */

    p{
    font-size: 0.875em; /* 14px/16=0.875em */

    </style>

    </head>

    <body>

    <h1>This is heading 1</h1>

    <h2>This is heading 2</h2>

    <p>This is a paragraph.</p>

    <p>Specifying the font-size in em allows all major browsers to resize the


    text.

    Unfortunately, there is still a problem with older versions of IE. When


    resizing the text, it becomes larger/smaller than it should.</p>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {

    font-size: 100%;

    }
    h1 {

    font-size: 2.5em;

    h2 {

    font-size: 1.875em;

    p{

    font-size: 0.875em;

    </style>

    </head>

    <body>

    <h1>This is heading 1</h1>

    <h2>This is heading 2</h2>

    <p>This is a paragraph.</p>

    <p>Specifying the font-size in percent and em displays the same size in all
    major browsers, and allows all browsers to resize the text!</p>

    </body>

    </html>

    <!DOCTYPE html>
    <html>

    <head>

    <style>

    p.normal {

    font-weight: normal;

    p.light {

    font-weight: lighter;

    p.thick {

    font-weight: bold;

    p.thicker {

    font-weight: 900;

    </style>

    </head>

    <body>

    <p class="normal">This is a paragraph.</p>


    <p class="light">This is a paragraph.</p>

    <p class="thick">This is a paragraph.</p>

    <p class="thicker">This is a paragraph.</p>

    </body>

    </html>

    <!DOCTYPE html>

    <html>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <body>

    <h1 style="font-size:10vw;">Responsive Text</h1>

    <p style="font-size:5vw;">Resize the browser window to see how the text


    size scales.</p>

    <p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw
    will set the size to 10% of the viewport width.</p>

    <p>Viewport is the browser window size. 1vw = 1% of viewport width. If


    the viewport is 50cm wide, 1vw is 0.5cm.</p>

    </body>

    </html>
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    p.normal {

    font-variant: normal;

    p.small {

    font-variant: small-caps;

    </style>

    </head>

    <body>

    <p class="normal">My name is Hege Refsnes.</p>

    <p class="small">My name is Hege Refsnes.</p>

    </body>

    </html>

    You might also like