Se escucha mucho hablar sobre Web 2.0 pero pocos entienden el concepto, pero lo que esta claro es que este nuevo concepto trajo consigo mejoras e interacción de casi toda herramienta diseñada para Web, las mejoras visuales son una notable característica en este paso, ya que podemos enriquecer nuestros diseños añadiendo tipografías que sean de fácil lectura o simplemente bellas que resalten nuestro diseño, generando un buen impacto visual a nuestros visitantes, a continuación algunos ejemplos de estilos CSS.
.style1 {
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style2 {
font-family: Cambria, serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.7em;
}
.style3 {
font-family: Cambria, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.6em;
}
.style4{
font-family: Cambria, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style5{
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}
.style6{
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.6em;
}
.style7{
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;
}
.style8{
font-family: “Lucida Grande”, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.5em;
}
.style9{
font-family: “Lucida Grande”, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style10{
font-family: “Lucida Grande”, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style11{
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: -0.6px;
line-height: 1.5em;
}
.style12{
font-family: Verdana, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style13{
font-family: “Trebuchet MS”, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style14{
font-family: “Trebuchet MS”, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;
}
.style15{
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;
}
.style16{
font-family: Georgia, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}
.style17{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.6em;
}
También te puede interesar:
No hay posts relacionados.
Varios de los estilos se basan en Cambria, una fuente muy versátil y bonita. Pero parecen olvidar que el 50%* de los usuarios no tienen esa fuente instalada, por lo que para la mitad de la gente simplemente es una Serif.
(*: http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml)
es cierto pero también se puede utilizar en el css @font-face soportado por la mayoria de los navegadores y permite incrustar fuentes OpenType y TrueType.