texto - tamaño de letra en css

Tamaño de fuente sensible

Question

He creado un sitio utilizando la cuadrícula Zurb Foundation 3. Cada página tiene un h1 grande.

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div><!-- End Tagline -->
</div><!-- End Row -->

Cuando redimensiono el navegador al tamaño móvil, la fuente grande no se ajusta y hace que el navegador incluya un desplazamiento horizontal para acomodar el texto grande.

He notado que en la página de ejemplo de tipografía de Zurb Foundation 3, los encabezados se adaptan al navegador a medida que se comprimen y expanden.

¿Me estoy perdiendo algo realmente obvio? ¿Cómo logro esto?

Answer 1

Al igual que con muchos marcos, una vez que se "salga de la cuadrícula" y se anule el CSS predeterminado del marco, las cosas comenzarán a romperse de izquierda a derecha. Los marcos son inherentemente rígidos. Si utilizara el estilo H1 predeterminado de Zurb junto con sus clases de cuadrícula predeterminadas, entonces la página web debería mostrarse correctamente en el móvil (es decir, receptivo).

Sin embargo, parece que desea encabezados 6.2em muy grandes, lo que significa que el texto tendrá que reducirse para que quepa dentro de una pantalla móvil en modo retrato. Lo mejor es usar un complemento de jQuery de texto de respuesta, como http://simplefocus.com/flowtype/ y http://fittextjs.com/ . Si quieres algo liviano, puedes revisar mi complemento de texto escalable jQuery:

http://thdoan.github.io/scalable-text/

Uso de la muestra:

<script>
$(document).ready(function() {
  $(''.row .twelve h1'').scaleText();
}
</script>

Answer 2

Aquí hay algo que me funcionó. Sólo lo probé en un iPhone.

Ya sea que tenga etiquetas h1 , h2 o p coloque esto alrededor de su texto:

<h1><font size="5">The Text you want to make responsive</font></h1>

Esto representa un texto de 22 puntos en un escritorio y aún se puede leer en el iPhone.

<font size="5"></font>

Answer 3

Después de muchas conclusiones terminé con esta combinación.

@media only screen and (max-width: 730px) {

 h2{
        font-size: 4.3vw;
    }

}

Answer 4

El font-size no responderá de esta manera al cambiar el tamaño de la ventana del navegador. En su lugar, responden a la configuración del tamaño del zoom / tipo del navegador, como si presionas ctrl y + juntas en el teclado mientras estás en el navegador.

Preguntas de los medios

Tendría que considerar el uso de consultas de medios para reducir el tamaño de la fuente en ciertos intervalos donde comienza a romper su diseño y crear barras de desplazamiento.

Por ejemplo, intente agregar esto dentro de su CSS en la parte inferior, cambiando el ancho de 320px para donde sea que su diseño comience a romperse:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Longitudes porcentuales de vista

También puede usar longitudes de porcentaje de ventana vmin como vw , vh , vmin y vmax . El documento oficial del W3C para estos estados:

Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene. Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia.

De nuevo, a partir del mismo documento W3C, cada unidad individual se puede definir de la siguiente manera:

Unidad vw: igual al 1% del ancho del bloque de contención inicial.

Unidad vh: igual al 1% de la altura del bloque de contención inicial.

Unidad vmin: igual a la menor de vw o vh.

Unidad vmax: igual a la mayor de vw o vh.

Y se usan exactamente de la misma manera que cualquier otro valor de CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

La compatibilidad es relativamente buena como se puede ver here . Sin embargo, algunas versiones de IE y Edge no admiten vmax. Además, iOS 6 y 7 tienen un problema con la unidad vh, que se corrigió en iOS 8.

Answer 5

El tamaño de fuente sensible también se puede hacer con este javascript llamado FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType: tipografía web sensible en su máxima expresión: tamaño de fuente basado en el ancho del elemento.

O este javascript llamado FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Hace que los tamaños de letra sean flexibles. Utilice este complemento en su diseño de respuesta para el cambio de tamaño basado en la proporción de sus titulares.

Answer 6

En Sass original real no scss puede usar los siguientes mixins para establecer automáticamente el párrafo y todos los encabezados en tamaño de fuente.

Me gusta porque es mucho más compacto. Y más rápido de escribir. Aparte de eso, proporciona la misma funcionalidad. De todos modos, si aún desea seguir con la nueva sintaxis - scss, siéntase libre de convertir mi sass a scss aquí: [CONVERTIR SASS A SCSS AQUÍ]

A continuación te doy cuatro mixins sass. Tendrás que ajustar su configuración a tus necesidades.

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Después de terminar de jugar con la configuración, solo realice una llamada en un mixin, que es: + config-and-run-font-generator () . Ver código abajo y comentarios para más información.

Supongo que podría hacerlo automáticamente para la consulta de medios, como se hace con las etiquetas de encabezado, pero todos usamos diferentes consultas de medios, por lo que no sería apropiado para todos. Utilizo el primer enfoque de diseño móvil, así es como lo haría. Siéntase libre de copiar y usar este código.

COPIAR Y PEGAR ESAS MEZCLAS A SU ARCHIVO

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // this one only calls the other ones

CONFIGURE TODAS LAS MEZCLAS A SUS NECESIDADES: ¡JUEGUE CON EL! :) Y LUEGO LLÁMELO EN LA PARTE SUPERIOR DE SU CÓDIGO SASS REAL CON:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // set first header element to this size
  $h1-step-down: $h1-step-down // decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here

Esto generaría esta salida. Puede personalizar los parámetros para generar diferentes conjuntos de resultados, sin embargo, debido a que todos usamos diferentes medios, consulte algunas combinaciones que tendrá que editar manualmente (estilo y medios).

CSS GENERADO:

+config-and-run-font-generator()

Answer 7

Esto se implementa en parte en la fundación 5.

en _type.scss tienen dos conjuntos de variables de encabezado

// We use these to control header font sizes
//for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Para el medio arriba, generan tamaños basados ​​en el primer conjunto de variables.

@media #{$medium-up} {
      h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
      h1 { font-size: $h1-font-size; }
      h2 { font-size: $h2-font-size; }
      h3 { font-size: $h3-font-size; }
      h4 { font-size: $h4-font-size; }
      h5 { font-size: $h5-font-size; }
      h6 { font-size: $h6-font-size; }
    }

Y para las pantallas pequeñas predeterminadas, es decir, utilizan el segundo conjunto de variables para generar css.

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

puede usar estas variables y anularlas en su archivo scss personalizado para configurar los tamaños de fuente para los tamaños de pantalla respectivos

Answer 8

Existen las siguientes formas por las cuales puedes lograr esto:

1. Utilice rem para, por ejemplo, 2.3 rem
2. Use em para, por ejemplo, 2.3em
3. Use% para, por ejemplo, 2.3% Además, puede usar: vh, vw, vmax y vmin.

Estas unidades se autorizarán según el ancho y la altura de la pantalla.

Answer 9

Hay otro enfoque para los tamaños de fuente sensibles: el uso de unidades rem.

html {
    /* base font size */
    font-size: 16px;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

Más adelante, en consultas de medios, puede ajustar todos los tamaños de fuente cambiando el tamaño de fuente base:

@media screen and (max-width: 767px) {
  html {
    /* reducing base font size will reduce all rem sizes */
    font-size: 13px;
  }

    /* you can reduce font sizes manually as well*/
    h1 { font-size: 1.2rem; }
    h2 { font-size: 1.0rem; }

}

Para hacer que esto funcione en IE7-8, tendrá que agregar una alternativa con unidades px:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
} 

Si está desarrollando con MENOS, puede crear una mezcla que hará las matemáticas por usted.

Soporte de unidades rem: http://caniuse.com/#feat=rem

Answer 10

Hay varias formas de lograrlo.

Utilice la consulta de medios pero requiere tamaños de fuente para varios puntos de interrupción

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

Usa las dimensiones en % o em . Solo cambia el tamaño de fuente base, todo cambiará. A diferencia de la anterior, solo puede cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de fuente base se ajuste al valor predeterminado del dispositivo y descanse todo en em

1. "Ems" (em) : El "em" es una unidad escalable. Un em es igual al tamaño de fuente actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em es igual a 12pt. Los ems son de naturaleza escalable, por lo que 2em sería igual a 24pt, .5em sería igual a 6pt, etc.
2. Porcentaje (%) : la unidad porcentual es muy parecida a la unidad "em", salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 12 puntos = 100%). Mientras usa la unidad de porcentaje, su texto permanece completamente escalable para dispositivos móviles y para accesibilidad.

ver kyleschaeffer.com/....

CSS3 admite nuevas dimensiones que son relativas al puerto de visualización. Pero esto no funciona en Android

1. 3.2vw = 3.2% del ancho de la ventana gráfica
2. 3.2vh = 3.2% de altura del viewport
3. 3.2vmin = Menor de 3.2vw o 3.2vh

4. 3.2vmax = Mayor de 3.2vw o 3.2vh

   body
   {
       font-size: 3.2vw;
   }

vea http://css-tricks.com/viewport-sized-typography/ y también mire en caniuse.com / ....

Answer 11

He estado jugando con formas de superar este problema, y ​​creo que he encontrado una solución:

Si puede escribir su aplicación para IE9 + y todos los demás navegadores modernos que admiten CSS calc (), unidades rem y unidades vmin, puede usar esto para lograr texto escalable sin consultas de medios:

body {
  font-size: calc(0.75em + 1vmin);
}

Aquí está en acción: http://codepen.io/csuwldcat/pen/qOqVNO

Answer 12

La solución "vw" tiene un problema al ir a pantallas muy pequeñas. Puedes establecer el tamaño de la base y subir desde allí con calc ():

font-size: calc(16px + 0.4vw);

Answer 13

Me temo que no hay una solución fácil con respecto al cambio de tamaño de fuente. Puede cambiar el tamaño de la fuente usando la consulta de medios, pero técnicamente no cambiará de tamaño sin problemas. Por ejemplo, si usas:

@media only screen and (max-width: 320px){font-size: 3em;}

El tamaño de la fuente será 3em tanto para 300px como para 200px de ancho. Pero necesita un tamaño de fuente más bajo para un ancho de 200 px para que responda perfectamente.

Entonces, ¿cuál es la solución real? Solo hay una manera. Tienes que crear una imagen png (con fondo transparente) que contenga tu texto. Después de eso, puede hacer que su imagen sea sensible (ej: ancho: 35%; altura: 28px). De esta manera, su texto será plenamente sensible con todos los dispositivos.

Answer 14

Puede hacer que el tamaño de fuente sea sensible si lo define en vw (ancho de la ventana gráfica). Sin embargo no todos los navegadores lo soportan. La solución es usar JS para cambiar el tamaño de fuente base dependiendo del ancho del navegador y establecer todos los tamaños de fuente en%. Aquí hay un artículo que describe cómo hacer fuentes adaptables: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Answer 15

Puede utilizar el valor de vista en lugar de ems, pxs o pts.

1vw = 1% del ancho de la ventana gráfica

1vh = 1% de la altura de la ventana gráfica

1vmin = 1vw o 1vh, el que sea menor

1vmax = 1vw o 1vh, el que sea mayor

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

de Css-tricks: http://css-tricks.com/viewport-sized-typography/

Answer 16

Si está utilizando una herramienta de compilación, pruebe con Rucksack.

De lo contrario, puede usar Variables CSS (Propiedades personalizadas) para controlar fácilmente los tamaños de fuente mínimo y máximo, por lo que ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Answer 17

Si no le importa utilizar una solución jQuery, puede probar el complemento TextFill

jQuery TextFill cambia el tamaño del texto para que se ajuste a un contenedor y hace que el tamaño de la fuente sea lo más grande posible.

https://github.com/jquery-textfill/jquery-textfill

Answer 18

Use media especificadores de media CSS (eso es lo que usan [zurb]) para un estilo responsivo:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Answer 19

jQuery "FitText" es probablemente la mejor solución de encabezado sensible. Compruébelo en Github: https://github.com/davatron5000/FitText.js

Answer 20

Utilizo estas clases de CSS, hago que mi texto sea fluido en cualquier tamaño de pantalla:

.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}

Answer 21

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em; 

}