Aplicar tipo de fuente a una entidad de símbolo html específica (™)

3 minutos de lectura

Estoy usando un tema de wordpress que tiene una selección de tipo de fuente para títulos de página y cuerpo de contenido. Estoy usando Montserrat para los títulos y Open-Sans para el cuerpo.

Tengo algunos títulos de productos en los que necesito ingresar el símbolo de marca registrada ™ / ™

Pero el símbolo de marca registrada en los títulos aparece como una fuente totalmente diferente que se parece a Times New Roman.

¿Hay alguna manera de aplicar el tipo de fuente solo al ™ entidad de símbolo html de marca registrada? ¿A nivel mundial?

traté de usar <sub>TM</sub> en títulos que funcionan, no funciona en todas partes, por ejemplo, no funcionaría en migas de pan.

  • No, no puede usar CSS en partes de texto (aparte de excepciones especiales, como fe :first-letter). Tú necesidad tenerlo envuelto en su propio elemento HTML, si desea poder aplicarle formato CSS.

    – CBroe

    20 de octubre de 2017 a las 1:47


  • Montserrat no tiene un glifo para ™, por lo que el navegador tiene que use una fuente diferente que lo haga para representarlo. fonts.google.com/specimen/Montserrat Si tiene otra fuente web en la que le gustaría que se muestre el carácter, sin tener que manipular el HTML, debe buscar una solución como stackoverflow.com/questions/11395584/… y agregar una fuente que contenga ese glifo. a su pila de fuentes.

    – CBroe

    20 de octubre de 2017 a las 1:50


  • Ya veo, eso responde a la pregunta supongo, gracias ..

    – Joe blogs

    20 de octubre de 2017 a las 1:55

Sí, puedes… pero no es realmente conveniente:

@font-face las reglas tienen un unicode-range propiedad que podría establecer para apuntar a un solo carácter:

c.onchange = e=> document.body.classList.toggle('amp');
@font-face {
  font-family: 'Ampersand';
  src: local('Courier');
  unicode-range: U+26;
}

body.amp{
  font-family: Ampersand, cursive;
  }
body{
  font-family: cursive;
  }
<span>lorem ipsum dolor sit amer &amp; some others</span>
<input type="checkbox" id="c">

Pero como dije, no es realmente conveniente, ya que debe convertirla en la primera fuente de todas sus declaraciones de familias de fuentes donde desea que se aplique…

  • En aras de la integridad, también puede crear un subconjunto del archivo de fuente sí mismo a un solo carácter, que es el equivalente en disco a usar unicode-range.

    – Leland

    7 de marzo a las 0:15

Por lo general, uno usaría un marcado diferente para estos y luego usaría CSS para generar el contenido. Por ejemplo, en lugar de

MyCompany&trade;

podrías usar

MyCompany<i class="symbol symbol-tm" />

Y luego usa CSS

i.symbol {
    position: relative;
    width: 1.5em;
}

i.symbol.symbol-tm:after {
    display: inline;
    content: "\2122";
    font-family: "Times New Roman";
}

Utilizo bastante la biblioteca styledComponents y, por lo tanto, en mi caso de uso, quería crear un componente de estilo global que pudiera insertar en cualquier lugar a lo largo de mi código, lo que me llevó a la siguiente solución:

export const Trademark = styled.span`
    ::before {
        display: inline;
        content: "\u2122";
        /* font-family: [your font family here] */
    }
`;

Lo que significa que puedo llamarlo en cualquier lugar usando <Trademark />

¿Ha sido útil esta solución?