fonts.html - master - leraaa/ttt

fonts.html
189 строк7 KB
nepa
Практические работы ПР №2-6
12 май 2026, 09:39
12 май 2026, 09:397229ec4
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика 3 - Текст и шрифты</title>
    <style>
        @font-face {
            font-family: 'RobotoLocal';
            src: url('fonts/Roboto-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'OpenSansLocal';
            src: url('fonts/OpenSans-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'OpenSansLocalBold';
            src: url('fonts/OpenSans-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        body {
            font-family: 'OpenSansLocal', Arial, sans-serif;
            margin: 30px;
            background-color: #f5f5f5;
        }
        
        h1 {
            text-align: center;
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            font-family: 'RobotoLocalBold', Arial, sans-serif;
        }
        
        h2 {
            font-family: 'RobotoLocal', Arial, sans-serif;
            color: #555;
        }

        .p1 {
            font-family: 'Times New Roman', Georgia, serif;
            font-style: normal;
            font-variant: small-caps;
            font-weight: normal;
            font-size: x-small;
            color: #ff0000;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .p2 {
            font-family: 'OpenSansLocal', Arial, sans-serif;
            font-style: italic;
            font-variant: normal;
            font-weight: bold;
            font-size: medium;
            color: rgb(0, 128, 0);
            background-color: #f0f0f0;
            padding: 10px;
        }

        .p3 {
            font-family: 'Courier New', Courier, monospace;
            font-style: oblique;
            font-variant: normal;
            font-weight: lighter;
            font-size: xx-large;
            color: blue;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .p4 {
            font-family: 'Comic Sans MS', cursive;
            font-style: normal;
            font-variant: normal;
            font-weight: 100;
            font-size: 12px;
            color: hsl(60, 100%, 35%);
            background-color: #333;
            padding: 10px;
        }

        .p5 {
            font-family: 'RobotoLocal', 'Impact', fantasy;
            font-style: normal;
            font-variant: normal;
            font-weight: 900;
            font-size: 150%;
            color: inherit;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .demo-local {
            background-color: #e0e0e0;
            padding: 15px;
            margin-top: 30px;
            border-radius: 10px;
            text-align: center;
        }
        
        .demo-roboto {
            font-family: 'RobotoLocal', sans-serif;
            font-size: 20px;
        }
        
        .demo-opensans {
            font-family: 'OpenSansLocal', sans-serif;
            font-size: 20px;
        }
        
        .demo-roboto-bold {
            font-family: 'RobotoLocalBold', sans-serif;
            font-size: 20px;
        }
        
        .demo-opensans-bold {
            font-family: 'OpenSansLocalBold', sans-serif;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>📝 Форматирование текста с помощью CSS</h1>
    
    <h2>Абзац 1 - С засечками (Serif)</h2>
    <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.</p>
    
    <h2>Абзац 2 - Рубленый (Sans-Serif) - Open Sans</h2>
    <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2>Абзац 3 - Моноширинный (Monospace)</h2>
    <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
             culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2>Абзац 4 - Рукописный (Cursive)</h2>
    <p class="p4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
         culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2>Абзац 5 - Аллегорический (Fantasy) - Roboto</h2>
    <p class="p5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.</p>
    

    <div class="demo-local">
        <h2> Локально подключенные шрифты</h2>
        <p class="demo-roboto"><strong>Roboto Regular</strong> — этот шрифт подключен локально из папки fonts</p>
        <p class="demo-roboto-bold"><strong>Roboto Bold</strong> — жирное начертание Roboto</p>
        <p class="demo-opensans"><strong>Open Sans Regular</strong> — этот шрифт тоже подключен локально</p>
        <p class="demo-opensans-bold"><strong>Open Sans Bold</strong> — жирное начертание Open Sans</p>
    </div>
</body>
</html>