learn-css/09.fonts.html at main · cesarlpb/learn-css · 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fuentes</title>
    <!-- Fuentes de Google Fonts: -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&display=swap" rel="stylesheet">
    <!-- Fuente Roboto con variantes de weight -->
    <link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <!-- Fuente Sofia: -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire|neon|outline|emboss|shadow-multiple">
    <!-- Hoja de estilos: -->
    <link rel="stylesheet" href="09.fonts.css">

</head>
<body>
    <h2>Fuentes</h2>
    <p class="font-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, porro exercitationem. Odio maxime sapiente, distinctio vitae dolorum, dolore laudantium a deleniti sequi repellat saepe voluptatem. Ea a sint quae delectus?</p>
    <p class="font-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, porro exercitationem. Odio maxime sapiente, distinctio vitae dolorum, dolore laudantium a deleniti sequi repellat saepe voluptatem. Ea a sint quae delectus?</p>
    <p class="font-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, porro exercitationem. Odio maxime sapiente, distinctio vitae dolorum, dolore laudantium a deleniti sequi repellat saepe voluptatem. Ea a sint quae delectus?</p>
    <p class="font-3">Se usa por defecto en bloque de código:</p>
    <pre>
        <code>
            p {
                background-color: #f4f4f4;
            }</code></pre>
    <p class="font-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, porro exercitationem. Odio maxime sapiente, distinctio vitae dolorum, dolore laudantium a deleniti sequi repellat saepe voluptatem. Ea a sint quae delectus?</p>
    <p class="font-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque, porro exercitationem. Odio maxime sapiente, distinctio vitae dolorum, dolore laudantium a deleniti sequi repellat saepe voluptatem. Ea a sint quae delectus?</p>

    <h2>Web safe fonts</h2>
    <p class="arial">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, aperiam.</p>
    <p class="verdana">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, fugit!</p>
    <p class="tahoma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolore!</p>
    <p class="times">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eligendi!</p>
    <p class="georgia">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, recusandae!</p>

    <h2>font-style</h2>
    <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>

    <h2>font-weight</h2>
    <p class="roboto-thin">This is a paragraph. weight: 100</p>
    <p class="roboto-thin-italic">This is a paragraph. weight: 100, italic</p>
    <p class="roboto-light">This is a paragraph. weight: 300</p>
    <p class="roboto-light-italic">This is a paragraph. weight: 300, italic</p>
    <p class="roboto-regular">This is a paragraph. weight: 400</p>
    <p class="roboto-regular-italic">This is a paragraph. weight: 400, italic</p>
    <p class="roboto-medium">This is a paragraph. weight: 500</p>
    <p class="roboto-medium-italic">This is a paragraph. weight: 500, italic</p>
    <p class="roboto-bold">This is a paragraph. weight: 700</p>
    <p class="roboto-bold-italic">This is a paragraph. weight: 700, italic</p>
    <p class="roboto-black">This is a paragraph. weight: 900</p>
    <p class="roboto-black-italic">This is a paragraph. weight: 900, italic</p>

    <h2>font-variant</h2>
    <p class="normal">Usando font-variant</p>
    <p class="small">Usando font-variant</p>
    <p class="caps">Usando font-variant</p>

    <h2>font-size</h2>
    <p class="fs-small">Usando font-size pequeño</p>
    <p class="fs-medium">Usando font-size normal</p>
    <p class="fs-large">Usando font-size grande</p>
    <p class="responsive">Usando font-size responsive</p>
    <p class="sofia">Usando fuente Sofia</p>
    <p class="sofia" style="font-size: 14px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea consectetur, odit saepe ipsam, et facilis eos odio laborum quas earum dolorem inventore aliquid quod dicta similique, vel doloremque? Minima.</p>
    <p class="font-effect-fire" style="background-color: rgba(0, 0, 0, 0.75); padding: 1em;">Lorem ipsum dolor sit amet.</p>
    <p class="font-effect-neon" style="background-color: rgba(0, 0, 0, 0.75); padding: 1em;">Neon Effect</p>
    <p class="font-effect-outline" style="background-color: rgba(0, 0, 0, 0.20); padding: 1em;">Outline Effect</p>
    <p class="font-effect-emboss" style="background-color: rgba(0, 0, 0, 0.75); padding: 1em;">Emboss Effect</p>
    <p class="font-effect-shadow-multiple" style="background-color: rgba(0, 0, 0, 0.75); padding: 1em;">Multiple Shadow Effect</p>

    <h2>Combinaciones de fuentes</h2>
    <div class="container">
        <h1>Título del container</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa inventore non eveniet iure minus totam? Minus dolor libero dolores illum, laboriosam corporis! Nemo accusantium tempore commodi saepe sapiente amet debitis.</p>
    </div>

    <p>Más sobre combinaciones de fuente y ejemplos en:</p>
    <ul>
        <li><a href="https://elementor.com/blog/font-pairing/" target="_blank">Blog de Elementor</a></li>
        <li><a href="https://www.w3schools.com/css/css_font_pairings.asp">W3Schools</a></li>
    </ul>

    <h2>Atajo font</h2>
    <p class="a">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum asperiores, voluptatum excepturi architecto qui dicta atque recusandae assumenda corrupti sequi dolorem. Quidem sint exercitationem minima architecto, nobis labore velit nisi!</p>
    <p class="b">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nam reiciendis ipsam perspiciatis eveniet. Maiores corrupti nihil fugiat possimus aperiam. Aliquid a accusamus incidunt? Non commodi autem harum nostrum in.</p>
</body>
</html>