Estoy trabajando en un sitio web relacionado con la música y con frecuencia uso los caracteres especiales de HTML para sostenidos (♯) y bemoles (♭) para mantener las cosas bonitas, por ejemplo:
♯ ♭Sin embargo, he notado que en algunos navegadores (IE6, Safari para PC) esos caracteres no son compatibles. Creé un javascript condicional que sirve caracteres sencillos compatibles en lugar de los especiales (G# para G♯ y Bb para B♭). Pero tengo dificultades para descubrir cómo detectar qué navegadores carecen de esos caracteres.
Sé que podría probar el navegador (por ejemplo, ie6), pero esperaba hacer las cosas bien y probar el soporte de caracteres .
¿Alguien sabe de una buena manera de hacer esto usando javascript, jQuery o Rails? (La página es atendida por una aplicación de Rails, por lo que el objeto de solicitud y cualquier otra magia de Rails está sobre la mesa.
Si crea dos SPAN, uno que contiene el carácter que desea y el otro que contiene un carácter no imprimible U+FFFD (�) es bueno, entonces puede probar si tienen el mismo ancho.
<div style="visibility:hidden"> <span id="char-to-check">♯</span> <span id="not-renderable">�</span> </div> <script> alert(document.getElementById('char-to-check').offsetWidth === document.getElementById('not-renderable').offsetWidth ? 'not supported' : 'supported'); </script>Debe asegurarse de que el DIV no tenga un estilo con una fuente fija.
El "soporte del navegador" no es el problema aquí. Debería servir sus archivos como UTF-8 * y usar los caracteres apropiados en lugar de las entidades HTML.
También debe asegurarse de guardar sus archivos en UTF-8 (y no, por ejemplo, ASCII o ISO-8859-1).
Consulte también: el imperdible Joel sobre el software: el mínimo absoluto que todo desarrollador de software debe conocer absoluta y positivamente sobre Unicode y conjuntos de caracteres (¡sin excusas!) .
*No soy un tipo de Rails, pero creo que hace esto por defecto.
En lugar de jugar con JavaScript, lo que deberías estar haciendo es usar el rango unicode de css:
@font-face { font-family: 'MyWebFont'; /* Define the custom font name */ src: local("Segoe UI Symbol"), local("Symbola"), url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+266F, U+266D; /* Define the available characters */ } body { font-family: 'MyWebFont', Arial; } ♯ ♭ Normal text En los bloques local , defina las fuentes que las personas podrían haber instalado localmente y que contengan los símbolos que desee (como el símbolo de interfaz de usuario Segoe de Windows). Luego defina una fuente web (sugiero Symbola ) que contenga el símbolo que desea mostrar.
La directiva de rango unicode les dice a los navegadores compatibles ( IE9 y posteriores ) que no descarguen la fuente a menos que los símbolos especificados estén presentes en la página (puede encontrar su número Unicode buscando Tablas Unicode ).
Si ya tienen la fuente, no la descargarán. Si los símbolos no están presentes en la página y su navegador no es más antiguo que la suciedad, la fuente no se descargará. Solo se descargará cuando sea necesario.
(Si aún desea admitir el antiguo IE, use fontsquirrel para generar su declaración inicial de @font-face, luego agregue las partes local y unicode-range usted mismo.