Al usar CSS, ¿hay alguna forma de mostrar diferentes caracteres con diferentes tipos de letra?

Question

Mi texto HTML es como esto:

<p>abcdefghijklmnopqrstuvwxyz</p> 

Lo que yo quiero es mostrar un uso de "Times New Roman", y mostrar oz utilizando "Courier New", y esto se debe hacer uso de CSS, por ejemplo, sin cambios al texto HTML.

En pocas palabras, quiero CSS a automáticamente elija la fuente especificada correspondiente a qué personaje es.
a-n se debe mostrar con "Times New Roman";
o-z shoule se mostrará con "Courier New".

¿Hay alguna manera de lograr esto?

Si se puede resolver este problema, se puede resolver otro problema: mostrar un idioma diferente con una fuente diferente.

Answer 1

parece que se puede, al menos en algunos navegadores, usando algo llamado unicode-range Bueno, esto funciona en Chrome, y sorprendentemente, IE. No hay tanta suerte con Firefox y Opera.

Por cierto, más información sobre esto desde http://24ways.org/2011/unicode-range

vivo ejemplo: http://jsfiddle.net/jfcox/3LQyr/

<style> 
@font-face { 
    font-family: Foobar; 
    src: local('Times New Roman'); 
    unicode-range: U+61-6E; 
} 
@font-face { 
    font-family: Foobar; 
    src: local('Arial'); 
    unicode-range: U+6F-7A; 
} 
body{ 
    font-family:Foobar; 
} 
</style> 
<p>abcdefghijklmnopqrstuvwxyz</p>​ 

Answer 2

No se puede usar CSS para cambiar la fuente de los caracteres particulares como se describe, porque los selectores de CSS no seleccionan caracteres individuales: seleccionan elementos HTML.

Por lo tanto, necesitaría crear elementos alrededor de los bloques de texto que necesitan fuentes específicas. Lo ideal sería hacerlo en código del lado del servidor, aunque no sé si eso es práctico para usted. Su servidor necesitaría salida HTML así:

<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p> 

A continuación, se aplican los tipos de letra en su caso en el CSS:

.languageOne { font-family: "Times New Roman", serif; } 
.languageTwo { font-family: "Courier New", monospace; } 

Answer 3

Si los personajes pertenecen a diferentes sistemas de escritura, como el latín y hebreo, o el cirílico y griego, los navegadores menudo de forma automática usa diferentes fuentes para ellos. Sin embargo, esto solo ocurre en la medida en que la página no especifique las fuentes, es decir, se relaciona solo con las fuentes predeterminadas, y las fuentes utilizadas están determinadas por los valores predeterminados del navegador y la configuración del navegador controlada por el usuario.

Aunque la técnica descrita en la respuesta de JayC ofrece una solución parcial, se obtiene una cobertura del navegador mucho mejor al distinguir los textos en diferentes idiomas en el marcado. En un documento bilingüe, basta utilizar el marcado para textos en uno de ellos (el que se usa menos, por razones prácticas). Usar class como en la respuesta de Gutch proporciona la mejor cobertura, pero hoy en día el soporte para los selectores de idioma en CSS está tan extendido que, en su lugar, podría considerar usar el atributo lang más lógico, p.

<h1>Hello − <a lang=ru>Привет</а></h1> 

allí tendría que utilizar las reglas como

[lang=ru] { font-family: ...; } 

(Mi ejemplo utiliza un elemento <a> efectivamente como una variante más corta de <span>.Formalmente, esto solo es posible cuando el texto no está dentro de un elemento <a> externo).

Sin embargo, para el estilo visual, sería justo lo contrario de la selección de fuente por idioma. Realmente parece extraño si la "e" en "Hola" es diferente del cirílico "е" en "Привет" en la misma línea. Casi siempre es mejor usar la misma fuente para todos los idiomas en un documento, si es posible. Esto significa seleccionar una fuente que funcione para todos ellos.