Para desactivar una sola aparición de una ligadura en una etiqueta web, rodea sus letras con un span en línea y desactiva allí la característica de ligadura correspondiente. El resto del texto conserva su configuración. CSS no tiene un interruptor general para desactivar una ligadura específica en toda una fuente. Los controles de ligaduras de MDN definen categorías de características, no sustituciones individuales.

Esta guía está dirigida a una persona usuaria de Mac que edita el HTML y CSS de una página web. La tarea concreta consiste en separar la primera fi de la etiqueta sintética fine flake office fine, y permitir que el resto del texto conserve sus ligaduras. Una pequeña prueba local permite ver la diferencia entre cambiar una sola aparición y cambiar una característica completa.

¿Qué se puede desactivar selectivamente con CSS?

Una característica de ligadura puede incluir varias sustituciones. Desactivar liga significa desactivar esa característica para el texto afectado; no significa seleccionar un par de letras específico. Del mismo modo, font-variant-ligatures: no-common-ligatures controla las ligaduras comunes mediante liga y clig. Las sustituciones concretas dependen de la fuente. MDN: font-variant-ligatures

La distinción útil está entre dónde se aplica una configuración y qué característica de la fuente controla. Puedes limitar la configuración a dos letras mediante el marcado, aunque la característica incluya muchas ligaduras. Así obtienes una solución alternativa para una aparición concreta sin necesitar un interruptor de exclusión para toda la fuente.

Resultado deseado Enfoque adecuado Condición
Separar una aparición de fi Rodear esa aparición y desactivar localmente su característica Puedes editar el marcado
Eliminar las ligaduras discrecionales y conservar las comunes Usar no-discretionary-ligatures en el elemento previsto La sustitución no deseada pertenece a dlig
Eliminar todas las fi y conservar todas las demás ligaduras comunes Usar una característica específica de la fuente documentada, si está disponible La fuente debe proporcionar el control necesario
Cambiar una aparición en una aplicación que no puedes editar Buscar el formato a nivel de carácter documentado para esa aplicación CSS web no determina qué admite una aplicación de escritorio

Prefiere font-variant-ligatures para las categorías que admite. MDN recomienda usar las propiedades de fuentes de nivel superior cuando estén disponibles; font-feature-settings da acceso a características OpenType de nivel inferior para otros casos. Escribir font-feature-settings: "liga" off no añade un control específico para pares de letras. MDN: font-feature-settings

Haz una comparación local en tu Mac

Empieza con un archivo independiente para poder comparar el resultado sin estilos de página ajenos. En TextEdit, elige File > New y luego Format > Make Plain Text. Introduce el ejemplo completo que aparece a continuación, guárdalo como ligature-demo.html y elige Use .html si aparece la indicación. Estos son los pasos documentados por Apple para crear un archivo HTML en TextEdit. Apple: Trabajar con documentos HTML en TextEdit en Mac

Abre el archivo guardado en el navegador. El ejemplo usa fuentes disponibles localmente y no requiere bibliotecas ni descargas. La lista de fuentes es ilustrativa: para que se vea una diferencia, la fuente seleccionada debe contener las ligaduras pertinentes. La prueba consiste en la representación del navegador; no se presupone ninguna forma concreta de los glifos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

En la fila central, el span contiene las dos letras de fi que se quieren modificar. El resto de esa fila hereda la configuración de ligaduras comunes. Un span es adecuado para este agrupamiento puramente estilístico: WHATWG lo define como un elemento que representa a sus hijos sin aportar significado propio. WHATWG: El elemento span

Revisa la comparación en tres pasos:

  1. Compara la primera fine de las filas de referencia y central. Fíjate en la forma de las letras, no solo en el ancho total.
  2. Compara flake, office y la última fine entre esas filas. Quedan fuera de la excepción, así que deberían conservar la configuración de la característica original.
  3. Compara la fila inferior con las demás. Es el control más amplio: las ligaduras comunes están desactivadas en toda esa fila.

Si las tres filas se ven idénticas, la comparación no es concluyente. Cambia la fuente de muestra por la que realmente piensas usar y elige secuencias de letras para las que esa fuente documente ligaduras. Una declaración CSS no puede demostrar una sustitución que la fuente seleccionada no proporciona.

Aplica la excepción sin alterar el flujo del texto

Para una etiqueta corta, coloca el span directamente alrededor de toda la secuencia que quieras separar. Mantén juntos en el código fuente los caracteres anteriores y posteriores, como hace el ejemplo con fi y ne. No insertes un espacio ni un salto de línea dentro de la palabra solo para que el marcado sea más fácil de leer.

El span necesita el cambio de configuración de la característica. Poner una sola letra en un span sin estilo no rompe las ligaduras de forma fiable: la especificación de texto del W3C exige que la formación de formas continúe a través de los límites entre elementos en línea cuando no hay un cambio efectivo de formato. También define situaciones en las que los márgenes, bordes, relleno u otro formato interrumpen esa formación. W3C: Formación de formas a través de los límites entre elementos

Mantén esta excepción como un span en línea normal. Añadir inline-block, espaciado o contenedores de diseño introduce decisiones de diseño adicionales que la tarea no requiere. Después de aplicar la configuración tipográfica, estrecha la ventana del navegador e inspecciona la etiqueta dentro de su contenedor previsto. Comprueba que los saltos de línea no hayan cambiado, porque una forma distinta de los glifos puede cambiar el espacio que ocupa el texto.

Para secuencias más largas, define explícitamente el límite deseado. Si la sustitución no deseada afecta a ffi, rodear solo fi también crea un límite de formato dentro de la secuencia más amplia. Prueba la palabra completa y las letras contiguas en vez de dar por sentado que todas las sustituciones superpuestas se comportarán de forma independiente.

Al adaptar el ejemplo a una página existente, edita la etiqueta pertinente en su código fuente o componente. Evita reconstruir un párrafo entero a partir del texto visible solo para añadir una excepción; conserva sus enlaces, énfasis y estructura de elementos actuales. Este ejemplo trata deliberadamente una aparición conocida en vez de intentar reemplazos automáticos en una página arbitraria.

¿Qué pasa si la ligadura permanece o desaparecen otras ligaduras?

Usa la comparación como secuencia de diagnóstico antes de añadir más reglas de anulación.

Primero, comprueba la categoría de la característica. El ejemplo se ocupa de las ligaduras comunes. Si la fuente documenta la sustitución no deseada bajo dlig, aplica no-discretionary-ligatures a la excepción en su lugar. Una sustitución contextual puede involucrar calt, controlada por no-contextual; esa configuración puede afectar otras formas contextuales dentro del texto seleccionado. Definiciones de categorías de características de MDN

Después, comprueba si hay configuraciones en conflicto. Una declaración font-feature-settings existente puede anular las opciones de características que implica font-variant-ligatures. El W3C especifica que las configuraciones de características de bajo nivel se aplican más adelante durante la resolución de características. Revisa esa declaración antes de concluir que el enfoque con span no es compatible. W3C: Resolución de características y variaciones de fuentes

Luego, comprueba el alcance. Si otros términos pierden ligaduras, confirma que la clase de excepción se aplique solo al span objetivo. Una configuración aplicada al párrafo o a su contenedor abarca un rango de texto mucho mayor. En el ejemplo local, la fila inferior muestra intencionalmente ese resultado más amplio.

Por último, distingue la tipografía opcional de la formación de formas necesaria. font-variant-ligatures: none abarca más de lo que requiere esta tarea, y los controles para desactivar ligaduras no incluyen las obligatorias. El W3C especifica expresamente que esta propiedad conserva las ligaduras obligatorias. W3C: Ligaduras

Si el objetivo es eliminar en todas partes un tipo de ligadura, hay que aplicar la técnica del span local a cada aparición prevista. Una característica específica de la fuente podría ofrecer una solución más sencilla, pero su etiqueta y efecto deben consultarse en la documentación de esa fuente. No des por sentado que un número de conjunto estilístico tiene el mismo significado en distintas fuentes.

¿Una biblioteca de formación de texto ofrece un control más preciso?

HarfBuzz expone rangos de características mediante hb_feature_t: una característica tiene una etiqueta, un valor, un inicio inclusivo y un final exclusivo, expresados mediante valores de clúster. Esto permite que una aplicación que llama a la biblioteca de formación de texto aplique la configuración de una característica a un rango limitado. El rango sigue correspondiendo a una característica, no a un selector universal para una ligadura con nombre. HarfBuzz: hb_feature_t

Esa API pertenece a una capa distinta del CSS normal de una página. El mecanismo documentado por HarfBuzz pasa las solicitudes de características a hb_shape(). Sus ejemplos describen búferes de formación de texto y reglas de búsqueda de fuentes, en vez de añadir una opción a las hojas de estilo del navegador. Para esta tarea de una etiqueta web en Mac, introducir una canalización de formación de texto personalizada supondría más trabajo que la excepción en línea. HarfBuzz: Características OpenType

Termina comprobando el par de letras objetivo, las ligaduras cercanas y la etiqueta al ancho real en que se muestra. Mantén la excepción mínima que funcione: toda la secuencia no deseada dentro de un solo span, la característica adecuada desactivada allí y el resto del texto con la configuración prevista.

Fuentes