Meta tags:
description=Usa la propiedad CSS text-rendering para elegir calidad de texto sobre velocidad o viceversa. Consulta los valores y prueba ejemplos.;

Headings (most frequently used words):

propiedad, text, rendering, la, optimizespeed, optimizelegibility, valores, ejemplo, de, css, cuándo, usarla, sintaxis, diferencia, entre, aspectos, tener, en, cuenta, propiedades, relacionadas, práctica, con, los,

Text of the page (most frequently used words):
text (53), font (36), border (36), css (31), #rendering (30), #optimizelegibility (22), color (22), style (20), grid (18), que (17), aprender (15), html (14), texto (14), background (14), width (14), navegador (13), propiedad (13), column (13), los (12), legibilidad (12), kerning (12), auto (12), las (11), para (10), optimizespeed (10), velocidad (10), bottom (10), break (10), sobre (9), renderizado (9), valor (9), variant (9), table (9), top (9), right (9), left (9), image (9), animation (9), overflow (8), precisión (8), ligaduras (8), body (8), una (8), class (8), padding (8), margin (8), position (8), stroke (8), valores (7), debe (7), size (7), decoration (7), offset (7), flex (7), propiedades (6), page (6), enfatizar (6), geométrica (6), title (6), line (6), align (6), type (6), w3docs (5), práctica (5), geometricprecision (5), especifica (5), family (5), como (5), transform (5), height (5), transition (5), last (5), outline (5), radius (5), child (5), formatter (5), generator (4), cuenta (4), entre (4), sintaxis (4), cuándo (4), dibujar (4), sugerencia (4), letter (4), spacing (4), feature (4), ligatures (4), hace (4), con (4), puede (4), optimize (4), head (4), ejemplo (4), lorem (4), ipsum (4), italic (4), uppercase (4), prioriza (4), mode (4), fill (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), todos (3), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), javascript (3), ejemplos (3), tener (3), diferencia (3), shadow (3), más (3), settings (3), initial (3), por (3), solo (3), cuando (3), qué (3), páginas (3), lugar (3), rendimiento (3), copiar (3), del (3), sans (3), serif (3), object (3), página (3), word (3), wrap (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), content (3), columns (3), direction (3), clip (3), box (3), only (3), ver (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), relacionadas (2), aspectos (2), usarla (2), this (2), control (2), amplia (2), hereda (2), elemento (2), padre (2), inherit (2), predeterminado (2), están (2), optimizar (2), cada (2), mejor (2), posible (2), aplica (2), general (2), mucho (2), grande (2), ralentizar (2), visible (2), elementos (2), específicos (2), encabezados (2), textos (2), navegadores (2), ella (2), pruébalo (2), mismo (2), avada (2), waffle (2), ffi (2), legibility (2), speed (2), the (2), document (2), doctype (2), pares (2), letras (2), bien (2), helvetica (2), roboto (2), eee (2), solid (2), layout (2), svg (2), level (2), quieres (2), características (2), tipográficas (2), usa (2), notablemente (2), aplicarlo (2), dibujo (2), donde (2), trabajo (2), lado (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), skip (2), perspective (2), inside (2), anchor (2), path (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, comprobar, estás, ajustando, tipografía, estas, dan, directo, use, desactivados, suposiciones, este, interpretado, manera, diferente, descripción, especificadas, son, predecibles, prefiere, estándar, sea, establecerla, descendientes, exactamente, arriesgado, bloque, incluso, causar, destello, primer, pintado, aplícalo, etiquetas, cortas, coste, largos, pueden, interpretar, ignorar, activa, grandes, algunos, motores, bases, resultados, críticos, maquetación, garantía, 777777, siguiente, muestra, efecto, claro, aprecia, benefician, ten, resultado, variar, según, renderiza, notes, ningún, cambio, example, f9f9f9, ccc, fixed, 000, código, textrendering, dom, scalable, vector, graphics, versión, animatable, heredada, inicial, originó, pero, ahora, está, incluida, especificaciones, module, basados, gecko, firefox, webkit, blink, safari, chrome, permiten, aplicarla, contenido, mediante, estandarizada, entornos, trátala, mejora, progresiva, seguir, luciendo, ignore, detallado, individuales, dedicadas, establece, activando, contrapartida, gran, cantidad, forzar, preferible, forma, selectiva, geometría, precisa, pueda, escalarse, suavemente, activan, desactivan, decide, tiene, cuatro, palabra, clave, omitir, tipográfico, adicional, eso, existe, largas, dispositivos, bajo, títulos, hero, logotipos, buen, mejoran, aspecto, esto, prominente, mayoría, nunca, necesitas, razonable, recurre, dos, situaciones, esta, explica, vale, pena, usarlo, problemas, ejecutables, puedes, comparar, indica, motor, bruta, permite, activar, desactivar, ajuste, espacio, combinación, caracteres, glifo, elegir, calidad, viceversa, consulta, prueba, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, property, underline, orientation, indent, ink, combine, upright, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, east, asian, caps, alternates, stretch, language, override, adjust, values, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectores, selectors, css3, guía, flexbox, guides, gradientes, nombres, colores, tablas, links, uso, introducción, basic, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, cursos,

Text of the page (random words):
propiedad css text rendering w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad css text rendering usa la propiedad css text rendering para elegir calidad de texto sobre velocidad o viceversa consulta los valores y prueba ejemplos la propiedad css text rendering le indica al motor de renderizado del navegador qué optimizar al dibujar texto velocidad de dibujo bruta la mejor legibilidad posible o precisión geométrica en la práctica es una sugerencia que permite activar o desactivar características tipográficas como el kerning ajuste del espacio entre pares de letras específicos y las ligaduras combinación de caracteres como fi en un solo glifo esta página explica qué hace cada valor cuándo vale la pena usarlo los problemas a tener en cuenta y ejemplos ejecutables que puedes comparar lado a lado cuándo usarla en la mayoría de las páginas nunca necesitas text rendering auto ya hace un trabajo razonable se recurre a ella en dos situaciones texto grande y prominente encabezados títulos hero logotipos donde un buen kerning y las ligaduras mejoran notablemente el aspecto optimizelegibility es el valor para esto páginas largas con mucho texto en dispositivos de bajo rendimiento donde quieres omitir el trabajo tipográfico adicional para eso existe optimizespeed la propiedad text rendering tiene cuatro valores de palabra clave auto el navegador decide el valor predeterminado optimizespeed prioriza la velocidad de dibujo el kerning y las ligaduras se desactivan optimizelegibility prioriza la legibilidad el kerning y las ligaduras se activan geometricprecision prioriza la geometría precisa para que el texto pueda escalarse suavemente cuando text rendering se establece en optimizelegibility el navegador prioriza la legibilidad activando el kerning y las ligaduras la contrapartida es el rendimiento en una página con una gran cantidad de texto forzar la legibilidad puede ralentizar notablemente el renderizado por lo que es preferible aplicarlo de forma selectiva en lugar de aplicarlo a body si quieres un control detallado sobre características tipográficas individuales en lugar de una sugerencia amplia usa las propiedades dedicadas font kerning font variant ligatures o font feature settings la propiedad text rendering se originó en svg pero ahora está incluida en las especificaciones css text module level 3 y level 4 los navegadores basados en gecko firefox y webkit blink safari chrome permiten aplicarla a contenido html mediante css como no es una propiedad css estandarizada en todos los entornos trátala como una mejora progresiva la página debe seguir luciendo bien cuando el navegador la ignore valor inicial auto se aplica a elementos de texto heredada sí animatable sí versión scalable vector graphics svg 1 1 sintaxis dom object style textrendering optimizelegibility sintaxis valores de css text rendering text rendering auto optimizespeed optimizelegibility geometricprecision initial inherit copiar ejemplo de la propiedad text rendering ejemplo de código css text rendering doctype html html head title title of the document title style body background color eee color 000 font size 1 em font family roboto helvetica sans serif hr margin 60 px 0 table table layout fixed padding 3 em border 1 px solid ccc background color f9f9f9 margin bottom 1 em td padding 15 px border 1 px solid eee h3 font size 5 em line height 1 font family sans serif uppercase text transform uppercase italic font style italic font family roboto helvetica sans serif optimizelegibility text rendering optimizelegibility style head body h2 text rendering example h2 table tr td text rendering auto td td h3 class uppercase lorem h3 td tr tr td text rendering optimizelegibility td td h3 class optimizelegibility uppercase lorem h3 td tr table table tr td text rendering auto td td h3 ipsum h3 td tr tr td text rendering optimizelegibility td td h3 class optimizelegibility ipsum h3 td tr table table tr td text rendering auto td td h3 class italic lorem ipsum h3 td tr tr td text rendering optimizelegibility td td h3 class optimizelegibility italic lorem ipsum h3 td tr table body html copiar pruébalo tú mismo la diferencia entre optimizespeed y optimizelegibility el siguiente ejemplo muestra la diferencia entre los valores optimizespeed y optimizelegibility el efecto más claro se aprecia en pares de letras que se benefician del kerning y las ligaduras como av wa o fi ten en cuenta que el resultado puede variar según el navegador y en texto que ya se renderiza bien puede que no notes ningún cambio visible ejemplo de la propiedad text rendering con los valores optimizespeed y optimizelegibility doctype html html head title title of the document title style p font size 1 5 em color 777777 optimize speed text rendering optimizespeed optimize legibility text rendering optimizelegibility style head body p class optimize speed avada waffle fi fl ffi optimizespeed p p class optimize legibility avada waffle fi fl ffi optimizelegibility p body html copiar pruébalo tú mismo aspectos a tener en cuenta es una sugerencia no una garantía los navegadores pueden interpretar o ignorar text rendering y auto ya activa la legibilidad para textos grandes en algunos motores no te bases en ella para resultados críticos de maquetación coste de rendimiento en textos largos optimizelegibility en un bloque grande de texto puede ralentizar el renderizado e incluso causar un destello visible en el primer pintado aplícalo a elementos específicos encabezados etiquetas cortas en lugar de a body o se hereda establecerla en un elemento padre se aplica a todos los descendientes que es exactamente por qué un body text rendering optimizelegibility general es arriesgado en páginas con mucho texto prefiere las propiedades estándar cuando sea posible para solo kerning o solo ligaduras font kerning y font variant ligatures están mejor especificadas y son más predecibles valores valor descripción auto el navegador hace suposiciones sobre cuándo optimizar para velocidad legibilidad y precisión geométrica al dibujar texto este valor es interpretado de manera diferente por cada navegador optimizespeed especifica que el navegador debe enfatizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto el kerning y las ligaduras están desactivados optimizelegibility especifica que el navegador debe enfatizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica geometricprecision especifica que el navegador debe enfatizar la precisión sobre la velocidad de renderizado y la legibilidad initial hace que la propiedad use su valor predeterminado inherit hereda la propiedad de su elemento padre propiedades relacionadas si estás ajustando la tipografía estas propiedades te dan un control más directo que la sugerencia amplia de text rendering font kerning font variant ligatures font feature settings font family y letter spacing práctica práctica el valor geometricprecision de la propiedad text rendering especifica el valor geometricprecision de la propiedad text rendering especifica que el navegador debe enfatizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica que el navegador debe enfatizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto que el navegador debe enfatizar la precisión sobre la velocidad de renderizado y la legibilidad comprobar was this page helpful yes no previous text overflow next text shadow on this page cuándo usarla sintaxis la diferencia entre optimizespeed y optimizelegibility aspectos a tener en cuenta valores propiedades relacionadas práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores