Materialise CSS proporciona varios elementos que se pueden utilizar para la tipografía de la página:
- Encabezados
- Citas en bloque
- Texto de flujo
Encabezados: Materialise CSS proporciona un estilo básico para usar en las etiquetas de encabezado. Las etiquetas a continuación muestran las etiquetas de encabezado disponibles que están diseñadas por Materialise CSS:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Citas en bloque: una cita en bloque se utiliza para dar énfasis a una cita o cita. También se puede utilizar para jerarquía y énfasis de texto adicional.
<blockquote>
This is an example quotation using blockquote tag.
</blockquote>
Texto de flujo: la clase de texto de flujo se puede usar para cambiar el tamaño de la fuente y la altura de línea del texto que se debe escalar de manera fluida. Para usar texto de flujo, se debe agregar la clase de texto de flujo a la etiqueta necesaria. El siguiente ejemplo muestra el uso de esta clase.
<p class="flow-text">I am Flow Text</p>
Nota: La fuente estándar utilizada por Materialise CSS es la fuente Roboto 2.0 . Esta fuente se puede reemplazar simplemente cambiando la pila de fuentes. Esto se puede hacer modificando el código a continuación para incluir la fuente necesaria y agregarla al CSS personalizado.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Include the Google Icon Font --> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Include compiled and minified Materialize CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- Include jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> </head> <body> <h3>Headings</h3> <div class="card-panel green"> <!-- Using all the headers --> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <!-- Using blockquotes --> <h3>Blockquote</h3> <h5> <blockquote> <p> This is an example quotation that uses the blockquote tag. <br> This is a basic tutorial for the Materialize CSS Typography. </p> </blockquote> </h5> <div class="card-panel"> <h3>Free Flow</h3> <!-- Using the flow-text class --> <p class="flow-text"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and courses. GeeksforGeeks is a very fast growing community among programmers and have a reach of around 10 million+ readers globally. </p> </div> <!-- Include the compiled and minified Materialize JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA