Aprendiendo HTML Parte 9: Cómo cambiar el color del texto y los tipos de fuente en HTML
Selección de color en texto y tipo de letraaplicado a los documentos HTML que hacemos es una de las cosas importantes que necesitan atención y consideración. Donde las fuentes son el tipo de letras utilizadas en un documento.
Hay varias cosas a las que debemos prestar atencióncomo si el tipo de fuente que se aplica de acuerdo con el diseño del sitio web, si el tipo de fuente que se aplica facilita a los visitantes la lectura de contenido en el sitio web, si el tipo de fuente está de acuerdo con el tema o tema del sitio web o el contenido y si el color del texto aplicado está de acuerdo con el fondo y no dificulta que los visitantes lee el texto y así sucesivamente.
El propio HTML proporciona elementosespecíficamente para regular la aplicación de fuentes y colores en documentos HTML. Hay muchos tipos de fuentes que podemos usar, pero también debemos recordar que las fuentes que se mostrarán en el navegador web en su conjunto provienen de la computadora del usuario. No es un problema si el navegador utilizado es de nuestra computadora, pero si se abre en un navegador en otra computadora, el diseño web que se ha diseñado puede volverse caótico porque el tipo de fuente aplicado no está disponible en esa computadora.
Por eso se utilizan las fuentes estándar.generalmente disponible en Windows, Linux, Mac OS y otros. Las fuentes estándar generalmente son compatibles con la mayoría de los navegadores web, por lo que no debe preocuparse. Los siguientes tipos de fuentes estándar que puede usar:
1. Tipos de fuente Serif
La fuente Serif es un tipo de fuente que tiene patasen cada letra como Times New Roman y Georgia. Este tipo de fuente tiende a ser rápido y fácil de leer, por lo que generalmente se usa para medios impresos en papel.
2. Tipos de fuentes monoespaciales
Las fuentes monoespaciales son tipos de fuente cuyos caracteres tienen el mismo ancho que Courier, Courier New y Andale Mono. Debido a su naturaleza, esta fuente se usa generalmente para escribir programas.
3. Tipos de fuente Sans-Serif
La fuente sans-serif es un tipo de fuente que no estiene patas en cada letra como Arial, Verdana, Trebuchet MS, Helvetica y Calibri. Esta fuente se usa a menudo como tipo de fuente en sitios web.
4. Tipos de fuente cursiva
La fuente cursiva es un tipo de fuente que imita la caligrafía o la escritura a mano, como Comic Sans. Esta fuente se usa generalmente para aspectos de la escritura que no son demasiado formales.
5. Tipos de fuentes de fantasía
La fuente de fantasía es un tipo de fuente visual con caracteres especiales como matriz de fuentes, Disney y otros, y rara vez se usa para el texto de la página.
Para que comprenda mejor el color del texto y el tipo de fuente en HTML, veamos la explicación a continuación:
Fuente del elemento
Con las etiquetas de fuente, puede ajustar o cambiar el color y el tamaño de un texto. También puede usar elementos de fuente proporcionados por HTML.
El uso de este elemento está marcado con la etiqueta <0000 y termina con la etiqueta </font> El cambio del color y el tamaño del texto se realiza mediante el uso de los atributos presentes en el elemento de fuente, a saber:
| Atributo | Función |
| Cara | Establece el tipo de fuente utilizada en la página web |
| Color | Indique el color del texto utilizado |
| Tamaño | Expresa el tamaño de un texto con valores del 1 al 7 |
Aquí hay un código de ejemplo para usar etiquetas de fuente en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Font</title>
</head>
<body>
<p><font face="Courier New" color="green" size="3">Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2014 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.</font></p>
</body>
</html>Después de ejecutar el código anterior en el navegador, se verá como la imagen a continuación:
En el uso actual, la etiqueta <0000 solamentecompatible con HTML 4.01 pero no compatible incluso eliminado por HTML5. Esto se debe a que el uso de la etiqueta <atible se puede reemplazar con CSS, donde las funciones de CSS son más superiores y eficientes que la etiqueta <REE.
El siguiente es un ejemplo del uso de CSS en la configuración de fuente en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan CSS - FONT di HTML</title>
<style type="text/css">
#p{
color: #ff00ff;
font-size: 20px;
font-weight: bold;
font-family:Rockwell, Calibri, Monospace;
font-style : oblique; }
#p1{
color:#0000FF;
font-size: 1em;
font-weight: normal;
font-variant: small-caps;
font-family: Andale Mono;}
</style>
</head>
<body>
<p id="p">Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML</p>
<p id="p1">Contoh Berikutnya Ini</h5>
</body>
</html>El resultado se verá como la imagen de abajo:
Después de ver el código CSS y la imagense ve en el navegador, por supuesto, tiene muchas preguntas sobre cuáles son las propiedades de fuente en el código anterior. Aquí doy una pequeña explicación una por una (pero recuerde, todavía nos enfocamos primero en HTML, no en CSS):
A. tamaño de fuente CSS
El tamaño de fuente se utiliza para determinar el tamaño deEl carácter de texto que se mostrará. Por lo tanto, puede aplicar diferentes tamaños de fuente para cada texto en un documento HTML. Puede usar píxeles, em o% unidades para determinar el tamaño de fuente como el ejemplo en el código anterior, que es:
#p{ font-size: 20px; }
#p1{ font-size: 1em; }Se recomienda encarecidamente utilizar unidades emen lugar de un píxel donde 1em es 16 píxeles. Pero si está más cómodo usando píxeles tampoco es un problema. En el ejemplo # p1 {font-size: 1em; }, el valor de píxel es de 16 píxeles porque 16 píxeles / 16 = 1em.
B. Familia de fuentes CSS
La familia de fuentes se utiliza para determinar el tipo de fuente que se aplica a los documentos HTML. Como ejemplo, mire un ejemplo del uso de font-family en el código anterior, que es:
#p{ font-family:Rockwell, Calibri, Monospace;}
#p1{ font-family: Andale Mono;}En #p, hay tres tipos de fuente, a saber, Rockwell,Calibri y Monospace. Lo que significa que el tipo de fuente que se aplicará primero es Rockwell. Pero si el tipo de fuente Rockwell no está disponible en la computadora del usuario, el tipo de fuente que se aplicará se convierte en Calibri. Luego, si no está disponible, aplique Monospace, que es la fuente predeterminada.
C. Peso de la fuente CSS
El peso de la fuente se usa para imprimir en negrita, aquí hay un ejemplo en el código
anterior:
#p{ font-weight: bold;}
#p1{ font-weight: normal};D. estilo de fuente CSS
El estilo de fuente se usa para hacer la técnica en cursiva, donde puede usar 3 valores, a saber, normal, cursiva y oblicua. El siguiente es un ejemplo del uso del estilo de fuente:
#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong
#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style
#p2(font-style : italic;} // Teks ditampilkan dalam huruf miringE. variante de fuente CSS
La fuente variante se utiliza para imprimir texto en mayúsculas. Aquí hay un ejemplo de su uso:
#p{ font-variant: normal;} // Teks normal
#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semuaDespués de leer el artículo anterior, espero quepuede cambiar el color y el tipo de fuente en su documento HTML. El siguiente tutorial de HTML trata sobre la creación de comillas en HTML usando las etiquetas q y blockquote.
