Cómo cambiar las fuentes en tu blog de wordpress
Puede cambiar las fuentes en su tema de WordPress por el estilo o la legibilidad. Tipográficas (o fuente) expertos en diseño utilizan variaciones de la fuente simples para lograr resultados sorprendentes de diseño. Puede utilizar fuentes de separar los titulares de texto del cuerpo (o titulares de widgets y el texto del contenido principal) a ser menos molesto.
| Propiedades de fuente | Valores comunes | Ejemplos CSS |
|---|---|---|
| Familia tipográfica | Georgia, Times, serif | body {font-family: Georgia- serif-} |
| tamaño de fuente | px,%, em | body {font-size: 14px;} |
| Estilo de fuente | Cursiva, subrayado | body {font-style: italic-} |
| font-weight | negrita, más audaz, normales | body {font-weight: normal} |
La web es en realidad un poco exigente con cómo se muestran los tipos de letra, así como qué tipo de fuentes que se pueden utilizar en el Familia tipográfica propiedad. No todas las fuentes aparecen correctamente en la web. Para estar seguro, tenga en cuenta que se pega a algunas familias de fuentes de uso común que aparecen correctamente en la mayoría de los navegadores:
Las fuentes serif: Times New Roman, Georgia, Garamond, Bookman Old Style
fuentes sans-serif: Verdana, Arial, Tahoma, Trebuchet MS
Cambio de color de fuente
Con más de 16 millones de diferentes combinaciones de HTML disponible, se puede encontrar el valor de color adecuado para su proyecto. Después de algún tiempo, podrás memorizar los códigos de color favorito. Es posible que el conocimiento de los códigos para los diferentes tonos de gris le ayuda a añadir rápidamente un toque de diseño adicional.
| Color | Valor |
|---|---|
| Blanco | #FFFFFF |
| Negro | # 000000 |
| grises | #CCCCCC#DDDDDD# 333333# e0e0e0 |
Puede cambiar fácilmente el color de la fuente cambiando el color propiedad del selector CSS que desea ajustar. Puede utilizar códigos hexadecimales para definir los colores.
Se puede definir el color de fuente general en su sitio mediante la definición en el selector CSS cuerpo como esto:
body {color: # 333333-}Cambio de tamaño de la fuente
Para ajustar el tamaño de la fuente, cambiar el tamaño de fuente propiedad del selector CSS que desea cambiar. Los tamaños de fuente son generalmente determinados por las unidades de medida, como en estos ejemplos:
px: Medición del pixel. Aumentar o disminuir el número de píxeles aumenta o disminuye el tamaño de la fuente (12 píxeles es mayor que 10px).
pt: Punto de medición. Como con los pixeles, aumentando o disminuyendo el número de puntos afecta el tamaño de fuente en consecuencia (12pt es mayor que 10pt).
em: Una unidad escalable de medida que es igual al tamaño de fuente actual. Por ejemplo, si el tamaño de fuente del cuerpo del sitio se define como 12 píxeles, entonces 1 em es igual a 12 píxeles; Del mismo modo, 2em es igual a 24px.
%: Medición Porcentaje. Aumentar o disminuir el número porcentaje afecta el tamaño de fuente en consecuencia (50% es el equivalente a 7, píxeles de 100% es el equivalente a 17 píxeles).
Video: CAMBIAR LA TIPOGRAFÍA DE TU WORDPRESS CON EASY GOOGLE FONTS
En el CSS plantilla predeterminada, el tamaño de fuente se define en el etiqueta en píxeles, como este:
font-size: 12px;
Cuando pones los tres elementos (familia, color y tamaño de fuente), así como en el etiqueta, que la fuente Estilo para el cuerpo general de su sitio. He aquí cómo trabajan juntos en el etiqueta de la CSS plantilla por defecto:
body {font-size: 12px; font-family: Georgia, "Carta de flujo de bits", Serif-color: # 666666-}serif fuentes tienen pequeñas colas, o volutas, en los bordes de las letras. Sans-serif fuentes tienen bordes rectos y están desprovistos de cualquier estilo de fantasía.
Cuando se desea cambiar una familia de fuentes en su CSS, abra la hoja de estilo (style.css), buscar Propiedad: font-family, cambiar los valores de dicha propiedad, y guardar los cambios.
En el CSS plantilla predeterminada, la fuente se define en el etiquetar así:
font-family: Georgia, "Carta de flujo de bits", serif-
fronteras
El uso de CSS fronteras puede añadir un toque interesante y única de elementos de su tema de diseño.
| Propiedades de la frontera | Valores comunes | Ejemplos CSS |
|---|---|---|
| frontera de tamaño | px, em | cuerpo {border-size: 1px;} |
| estilo de borde | sólido, punteado, discontinua | body {border-style: sólido} |
| color del borde | Los valores hexadecimales | body {border-color: #CCCCCC} |
recursos adicionales CSS
El tiempo puede venir cuando se desea explorar la personalización de su tema más. Aquí están algunos recursos recomendados:
Video: VideoTutorial para instalar cualquier tipografía en Wordpress
Codex de WordPress: Documentación Oficial de WordPress
W3Schools: Un manual de HTML y CSS en línea gratis y completa
Video: ¡Cómo añadir las fuentes de Google Fonts al editor de Wordpress! | Los Secretos de Wordpress
WebDesign.com: Una biblioteca de tutoriales en vídeo de alta calidad WordPress y la formación
Smashing Magazine: Da numerosos consejos y trucos para personalizar un tema de WordPress