Borrar el suavizado de fuentes de la pantalla Type. Fuentes antialiasing en el navegador usando Cufon

A menudo, el texto de un sitio web parece algo anguloso y tosco. Sin embargo, el texto que utiliza diferentes fuentes puede verse diferente en diferentes tamaños.

También hay ocasiones en las que resulta tentador poner el texto un poco más en negrita, pero el navegador muestra el texto sólo en negrita o sin negrita.

En cuanto al suavizado de fuentes, hay que decir que algunos navegadores en algunos sistemas operativos suavizan todo por sí mismos. Sí, y en el propio sistema operativo puedes habilitar el suavizado de fuentes. Por ejemplo, en Windows XP, el suavizado se configura aquí: Inicio -> Configuración -> Panel de control -> Pantalla -> pestaña Apariencia -> botón Efectos -> Aplique el siguiente método de suavizado de fuente de pantalla -> ClearType -> Ok . Todo lo que haya en el sistema operativo se suavizará.

Pero como lograr El suavizado de fuentes en nuestro sitio web siempre funcionó en el navegador., independientemente del navegador, sistema operativo y configuración.

Sugiero una opción para suavizar fuentes: usar la biblioteca Cufon.

Esta es una biblioteca de JavaScript.

El texto cuando se usa Cufon se suaviza. En este caso, se debe habilitar Javascript en el navegador.

Se admiten los siguientes navegadores:

• Internet Explorer 6, 7 y 8
• Internet Explorer 9 beta (a partir de 1.09i)
• Mozilla Firefox 1.5+
• Safari 3+
• Ópera 9.5+
• Google Chrome 1.0+
• iOS 2.0+
• Opera Mini (hasta cierto punto)

Ejemplo de suavizado:

El resultado es obvio.

Desventajas de este enfoque

1. Javascript debe estar habilitado. Pero creo que muchos usuarios lo tienen habilitado.
2. Subiendo archivos JS. El tamaño puede alcanzar hasta 200 kbytes. Dependiendo de la fuente.
3. No puede seleccionar texto ni copiarlo. Como opción, use Cufon solo en algunas partes del sitio: texto en el menú de navegación, encabezado. Para contenido que no será necesario copiar.
4. Si el enlace está subrayado, después de aplicar la biblioteca, el subrayado desaparece. Falta de biblioteca.
5. El diseño al pasar el cursor sobre un elemento debe describirse por separado. No tomado de estilos. Sin embargo, el resto del diseño será según la hoja de estilo.

Quizás estas sean todas las desventajas. En algunas situaciones serán importantes, pero en la mayoría de los casos pueden ignorarse. Especialmente en los casos en los que el diseñador ha dibujado, el diseño ha sido aceptado y es absolutamente necesario hacerlo suave y ligeramente audaz como en el diseño (les gusta poner Faux Bold en los diseños en Photoshop).

La tecnología ClearType está diseñada para mejorar la visualización de fuentes en monitores LCD.

En Windows 7, el suavizado de fuentes está habilitado de forma predeterminada y se configura automáticamente según las especificaciones de su monitor. Si la configuración automática no le conviene, puede ajustar manualmente la configuración de ClearType.

Preparándose para configurar ClearType

Para configurar correctamente el suavizado de fuentes utilizando la tecnología ClearType, debe hacer lo siguiente:

1. Instale la última versión del controlador de la tarjeta de video. Este controlador debe ser escrito por el fabricante de su tarjeta de video específicamente para Windows 7.

2. Instale el controlador de monitor más reciente que sea compatible con Windows 7.

3. Configure la resolución de pantalla con la que se sentirá cómodo trabajando.

4. Complete si aún no lo ha hecho.

Configuración de ClearType

1. Para ajustar la configuración de suavizado de fuentes, haga clic en Inicio, ingrese el comando en la barra de búsqueda sintonizar y presione Entrar.

El proceso de configuración del suavizado de fuentes no debería ser difícil.

1. Para deshabilitar el suavizado de fuentes en Windows 7, abra Panel de control -> Sistema -> Configuración avanzada del sistema.

2. abrir Opciones de rendimiento y en la pestaña Efectos visuales desmarque la casilla Suaviza las fuentes de pantalla irregulares.

3. Haga clic DE ACUERDO dos veces.

Ahora puede encontrar que las fuentes en la interfaz de los programas y el sistema operativo se muestran demasiado angulares y pequeñas. La razón es que en Windows 7, "Segoe UI" está configurada como fuente principal, tiene diferentes escalas y está diseñada para suavizado.

Configurar fuentes del sistema cuando el suavizado está deshabilitado

1. Para configurar la apariencia normal de las ventanas, abra Panel de control -> Personalización -> Color y apariencia de la ventana -> Opciones de diseño adicionales…

2. La lista desplegable controla los parámetros de visualización de la mayoría de los elementos de la interfaz de Windows 7. Configure la fuente Tahoma, tamaño de fuente 8 en los siguientes elementos de la lista desplegable:

• Información sobre herramientas
• Elemento de menú resaltado
• Título de la ventana activa
• Título de ventana inactivo
• Icono
• Nombre del panel
• cuadro de mensaje
• barra de menú

Tenga en cuenta que hay dos campos de Tamaño en esta ventana de configuración. El margen superior es el tamaño del elemento de la interfaz de Windows y el margen inferior es el tamaño de fuente. De este modo, Para ajustar el tamaño de fuente, realice cambios en el margen inferior y deje el margen superior sin cambios.

3. En el párrafo Botones de control de ventana establezca el tamaño en 21 (en el campo "Tamaño" superior) para mantener los tamaños estándar de los botones "Cerrar", "Contraer" y "Expandir".

4. Haga clic DE ACUERDO.

Pantalla y fuentes

Nuevos artículos

Comentarios (10) a "Administrar ClearType - suavizado de fuentes en Windows 7"

Todo esto está claro... ¿Pero qué hacer con la “escala” de las fuentes cuando se cambia la resolución de la pantalla a una resolución inferior a la “recomendada”? El mismo anti-aliasing está activado nuevamente... aunque parece estar deshabilitado en todas partes... incluso en el registro. ¿Cómo deshabilitar la escala en resolución de pantalla _baja_?

LAV, no hemos escrito nada sobre el registro. De lo contrario, deshabilitaste Cleartype, por lo que no podemos ofrecer ningún consejo. Según nuestra guía, el suavizado de fuentes está completamente deshabilitado y no se habilita al cambiar la resolución o la escala.

Inicialmente lo desactivé de la misma manera que en su artículo y solo luego entré al registro. El problema ya ha sido solucionado. Resultó estar en un controlador incorrecto para mi tarjeta de video, que instala Windows 7 y no quiere ser reemplazada por la original. Este controlador muestra fuentes normalmente sólo en el modo de resolución "recomendado" y comienza a "suavizarlas" en otras resoluciones. Usando una captura de pantalla en la que la fuente no estaba suavizada, fue posible registrar que, de hecho, las fuentes se muestran normalmente y solo se muestran en la pantalla en una forma ya "suavizada".
El soporte técnico de Microsoft respondió rápidamente y solucionó el controlador.

Interesante... ¿Qué tipo de controlador y qué modelo de tarjeta de video?

En mi opinión, ClearType funciona muy bien incluso en mi monitor CRT. Todas las fuentes se ven mucho mejor que con el suavizado normal

Depende del conductor. Antes del lanzamiento de nuevos controladores para mi nVidia, desactivé el suavizado (aparecía el efecto borroso), pero ahora, después de instalar los nuevos controladores, uso el suavizado.

Gente, no entiendo de dónde sacaron la personalización en el panel de control... No tengo ese elemento, a pesar de que es Windows...

Pablo, abra el panel de control en el modo de visualización “iconos grandes”, por ejemplo. "Personalización" se encuentra después de "Opciones de carpeta" y antes de "Conexiones a escritorio remoto".

¿Hay alguna forma de configurar el suavizado de fuentes en "Normal" en Windows 7? Este modo está disponible en XP, pero no lo encontré en 7.

¿Por qué quiero instalarlo? No quiero que se suavicen las fuentes pequeñas, porque es desagradable e inusual para mi vista, al igual que no suavizar las fuentes grandes.

¿Cómo puedo asegurarme de que las fuentes de hasta 15 px no tengan suavizado en Windows 7, pero las de 15 px y superiores sí lo tengan?

Gracias de antemano.

alexey, de ninguna manera.

El desarrollador del sitio no tiene muchos medios para cambiar la apariencia de la fuente, en particular, no hay forma alguna de controlar el suavizado del texto; Para aquellos que no lo saben, esta es una forma de suavizar las letras agregando píxeles de diferentes colores. Si amplía el texto en Windows, se verá claramente (Fig. 1).

Arroz. 1. Texto ampliado

Debido a las peculiaridades de la visión humana, no podemos distinguir estos píxeles individuales, pero gracias a ellos el texto se vuelve más legible. Windows utiliza una tecnología patentada llamada ClearType, MacOS tiene una solución similar, por lo que parece que no hay nada de qué preocuparse, el texto tiene el mismo aspecto en todos los navegadores. Sin embargo, Safari demostró en un momento que podía manipular texto sin pasar por el sistema, lo que lo diferenciaba de otros navegadores. Además, Safari 4 ahora admite una propiedad interesante: webkit-font-smoothing, con la que los desarrolladores web pueden especificar un algoritmo de suavizado.

Para que esta propiedad se manifieste, debe seleccionar un suavizado en la configuración que no sea "Estándar de Windows" ( Configuración > Apariencia > Suavizado de fuente), como se muestra en la Fig. 2.

Arroz. 2. Configuración de suavizado

Ahora puedes usar -webkit-font-smoothing y observar el resultado de su impacto. Esta propiedad tiene tres valores:

• ninguno - sin suavizado;
• - fuerte alisado;
• - alisado medio.

El ejemplo 1 muestra cómo usarlo para el texto de una página completa.

Ejemplo 1: uso de -webkit-font-smoothing

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Pasó un poco más de tiempo y llegó el día en que Cortés y sus conquistadores entraron en Tenochtitlán. No describiré todo lo que hicieron los españoles en la ciudad, porque esto es obra de un historiador y sólo cuento mi propia historia.

Henry Rider Haggard. la hija de moctezuma

El resultado del ejemplo se muestra en la Fig. 3.

Arroz. 3. Suavizado de texto con diferentes valores -webkit-font-smoothing

Cuando se establece en ninguno, el texto ha perdido toda legibilidad, mientras que el texto aparece en negrita y no a todos les gusta esto, proporciona el suavizado más universal.

Si bien las perspectivas para el uso de propiedades de suavizado de texto no están claras, la propiedad de suavizado de fuente puede aparecer en CSS3, que aún se encuentra en estado de borrador. Los navegadores no admiten esta función, con la excepción del motor Webkit en el que se basan Safari y Chrome.

Una vez más vuelvo al curso en vídeo de TutsPlus llamado “TutsPlus - Portafolio mínimo de PSD a WordPress”, encontré muchas cosas nuevas e interesantes allí.

Esta vez la pregunta se referirá a la propiedad.

, así que dediqué tiempo específicamente a esta pregunta para analizarla con más detalle. En primer lugar, fui a htmlbook.ru, una fuente de conocimientos indispensable para un diseñador de diseño HTML.

Naturalmente, había información detallada sobre el suavizado de fuentes y la gestión de este proceso a través de CSS. El artículo se llama "Suavizado de fuentes en Safari" y me sirvió de base para mi propio artículo.

Primero, qué es el suavizado de fuentes y por qué es necesario. Puedes adivinar para qué sirve, sin recursos ni artículos, porque el nombre en sí habla por sí solo. El objetivo de suavizar las fuentes es hacer que su apariencia en el dispositivo de salida (monitor y cualquier otra pantalla) sea más fluida. Es decir, los bordes de las fuentes se vuelven suaves y claros. Por supuesto, el texto creado con dicha fuente es más agradable de leer y los ojos no se cansan tanto por tal proceso.

Pero el método (y este es el segundo punto) mediante el cual se logra tal mejora en el estilo de fuente no es tan obvio. Incluso se podría decir más: es completamente inesperado. Anteriormente, observé accidentalmente una imagen de este tipo un par de veces, pero luego me pareció que se trataba de un "fallo" del monitor, su incapacidad para "dibujar" correctamente las letras de la fuente.

Ahora sé que esta visualización de la fuente se hizo intencionalmente, coloreando los píxeles ubicados en los bordes de las letras con diferentes colores. Es decir, resulta que el color del píxel de toda la letra de la fuente no es uniforme (por ejemplo, negro), sino que se compone de varios colores.

Pero aquí surge una paradoja: el ojo humano no se da cuenta de este hecho, sino todo lo contrario: tal visualización de letras le parece más clara y suave. Para no describir más qué es qué y cuánto, les daré una imagen que "tomé" descaradamente del sitio htmlbook.ru, porque yo mismo no pude crear una como esta:

En los sistemas operativos populares, esta tecnología se utiliza desde hace mucho tiempo con diferentes nombres; por ejemplo, en Windows tiene el nombre patentado ClearType. Sin embargo, usando la propiedad CSS

funcionó en el navegador, en su configuración debe configurar la visualización de fuentes que difieren de los estándares del sistema operativo Windows.

Por lo tanto, no es necesario buscar dicha configuración en el navegador Firefox; simplemente no está ahí. Pero en Safari existe tal configuración (en Chrome mis intentos tampoco tuvieron éxito):

Bueno, basta de navegadores: pasemos a CSS y propiedades.

- el suavizado está completamente desactivado;

- fuerte grado de alisado.

Y a continuación daré los tres ejemplos de cómo mostrar texto en el navegador Safari para cada valor de propiedad.

En general, esto es terrible: no se puede leer nada en absoluto, por lo que lo descartamos y nos olvidamos (en Firefox, Chrome y otros navegadores todo se mostrará correctamente, porque no tienen una configuración similar a Safari).

Segundo caso

Similar al segundo, pero el texto se ve un poco en negrita, lo cual no es tan bonito como el anterior.

Está claro que la propiedad principal de la plantilla HTML de Adi Purdila es: -webkit-font-smoothing: antialiased;

... las cosas no han avanzado mucho.

Quizás estés familiarizado con la situación cuando entras a un sitio web y hay fuentes torcidas (pequeñas, difíciles de leer, como en la imagen de la izquierda)... Pero no te apresures a criticar al diseñador. El diseñador lo intentó y lo intentó, eligiendo la fuente y su estilo. ¡Y aquí estás! ¡Ups, el diseñador lo arruinó! ¿Quizás has visto esto más de una vez, quizás te lo encuentras todo el tiempo? Entonces, ¿vale la pena comprobar si tienes habilitado el suavizado de fuente de pantalla?

Este problema probablemente surgió no hace mucho tiempo, debido al uso generalizado de pantallas LCD con mayor resolución. El píxel se ve mejor, no se produce borrosidad, como en el "tubo". Y la "pixelización" ha llevado al hecho de que en lugar de una línea inclinada vemos pasos. Para ver cómo planeó todo el autor del sitio, para ver toda la belleza, debe habilitar el suavizado de fuente de pantalla. En diferentes sistemas operativos, en diferentes versiones, esta configuración puede estar ubicada en un lugar diferente que en otros. Intentemos describir diferentes opciones.

WindowsXP

Haga clic derecho en el escritorio - Propiedades - Apariencia - Efectos

Marque la casilla junto a: "Aplicar el siguiente método para suavizar las fuentes de la pantalla" y seleccione Borrar tipo en el menú desplegable.

Haga clic en - Aplicar, luego - Aceptar.

En los sistemas operativos modernos, como Windows XP, si usa un monitor LCD, es posible que haya una opción de Configuración ClearType en el Panel de control. Ingrese a esta sección y ejecute el Asistente de configuración de ClearType. Siguiendo las instrucciones paso a paso, configurará de manera muy precisa y sutil el suavizado de fuentes específicamente para su tarjeta de video y su monitor. Y las fuentes ya no estarán “escalonadas” ni “borrosas”. Esta configuración es similar a cómo se implementa todo en Windows 7 y 8.

Suavizar las fuentes de pantalla de Windows 7

Esta opción está ubicada en una ubicación diferente y tiene más opciones y pruebas para elegir la mejor opción de visualización de texto.

“Panel de Control” - “Diseño y Personalización” - “Pantalla”. Luego, a la izquierda, debe seleccionar "Borrar configuración de texto de tipo". Se iniciará un asistente que le permitirá habilitar, configurar o deshabilitar Clear Type.

ventana 8

No hubo necesidad de configurar, ya estaba todo listo.

Pero, si está interesado, todas las configuraciones de Clear Type se encuentran en el mismo lugar que en Windows 7. En el escritorio, haga clic derecho y seleccione "Resolución de pantalla". En la línea superior "Panel de control - Apariencia y personalización - Pantalla - Resolución de pantalla", haga clic en el elemento "Pantalla". A la izquierda, seleccione "Ajustar texto de tipo claro". Asegúrese de que la casilla de verificación "Activar borrar tipo" esté marcada y haga clic en el botón "Siguiente". Es decir, lanzamos el asistente de configuración Clear Type. Seguimos las instrucciones en pantalla hasta conseguir la mejor visualización de fuentes.

Safari

Safari es un navegador de Apple. Pero también existe una versión para Windows. Es posible que la configuración en el propio sistema operativo se produzca de forma diferente. Escribe si sabes cómo.

En la esquina superior derecha del navegador Safari, haga clic en el ícono de configuración (engranaje).

Seleccione la pestaña "Apariencia". En el menú desplegable "Suavizado de fuente", seleccione lo que más nos guste: "Lo mejor para CRT" (utilicé este método como el mejor. Mire la captura de pantalla), "Claro" (las letras se han puesto en negrita), "Medio - óptimo para pantallas planas" (muy negrita), "Fuerte" (no podría ser más negrita: los bloques de texto se han oscurecido, la percepción de los párrafos ha cambiado), "Windows estándar" (se ve igual que en Windows. El navegador lee la configuración del sistema operativo).