Además de unos fondos y colores atractivos, la configuración de fuentes también es una parte importante del diseño web. Las fuentes adecuadas no sólo harán que la página sea más hermosa, sino que también mejorarán la experiencia del usuario. CSS proporciona una serie de propiedades para configurar estilos de fuente de texto, como cambiar fuentes, controlar el tamaño y el grosor de la fuente, etc.
Al aprender las propiedades CSS anteriores, podemos configurar la fuente, el tamaño, el estilo, la cursiva, la negrita, etc. para el texto en HTML.
1. familia de fuentes
El atributo font-family se utiliza para establecer la fuente de un elemento. La fuente es Song, Kai, etc.
A través del atributo font-family, se pueden declarar varias fuentes al mismo tiempo y las fuentes están separadas por comas. De acuerdo con el principio de llamada de fuentes, se llamará primero a la primera fuente. Si no se encuentra, se intentará con la siguiente fuente. Si no se encuentra ninguna, se llamará a la fuente predeterminada.
Ejemplo:
Por ejemplo, configure la fuente para el texto en la siguiente etiqueta <p>:
<p>programación dotcpp</p>
Puedes usar un selector de etiquetas y luego configurarlo en el atributo font-family:
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}Al declarar fuentes, debemos declarar las fuentes en inglés y las fuentes en chino por separado, y la declaración de fuentes en inglés debe estar antes de las fuentes en chino. Porque la mayoría de las fuentes chinas contienen letras en inglés, pero no son muy hermosas, mientras que las fuentes en inglés no contienen caracteres chinos. Entonces, si no queremos usar fuentes chinas para mostrar el inglés, debemos recordar declarar primero las fuentes en inglés. El primero declarado será llamado primero.
Fuentes en inglés de uso común: Arial, Helvetica, Tahoma, Verdana, Lucida Grande, Georgia, etc.
Fuentes chinas de uso común: SimSun, SimHei, Microsoft YaHei, FangSong, KaiTi, etc.
2.estilo de fuente
font-style establece el estilo de fuente. Puede configurar la fuente en cursiva, cursiva o normal. Una fuente en cursiva suele definirse como una fuente individual dentro de una familia de fuentes.
Los valores de atributos comunes para este género son los siguientes:
3.peso de fuente
El atributo font-weight establece la negrita de la fuente utilizada en el texto del elemento mostrado.
Los valores de propiedad comunes para esta propiedad son los siguientes:
4.tamaño de fuente
El atributo de tamaño de fuente se usa para establecer el tamaño de la fuente. La unidad comúnmente utilizada es px, que son píxeles.
px es la abreviatura de Pixel, que es la unidad más pequeña de imágenes o gráficos digitales que se pueden mostrar y representar en un dispositivo de visualización digital. El píxel es la unidad lógica básica en los gráficos digitales y el píxel también se denomina elemento de imagen.
5. variante de fuente
El atributo de variante de fuente puede convertir las letras minúsculas en inglés del texto en versalitas (las letras mayúsculas convertidas son similares en tamaño a las letras minúsculas previas a la conversión, por lo que se denominan versalitas). Los valores opcionales para el atributo font-variant son los siguientes:
6. fuente
El atributo de fuente se usa para establecer todos los atributos de fuente en una declaración, usando espacios para separar cada atributo. Es decir, el atributo de abreviatura integral de los atributos anteriores.
Si usamos el atributo de fuente para establecer el estilo de fuente, el orden de configuración es: estilo de fuente, variante de fuente, peso de fuente, tamaño de fuente/alto de línea, familia de fuente. No es necesario establecer ninguno de los valores y las propiedades no configuradas utilizarán sus valores predeterminados.