Red de conocimiento informático - Espacio del host - Quiero la historia de serif y sans serif~~Gracias a todos.

Quiero la historia de serif y sans serif~~Gracias a todos.

Oso Pardo @Think Fast Oso Pardo @Think Fast127.0.0.1,

dulce 127.0.0.1 <3 Blog Garden Community Página de inicio Nuevo ensayo Gestión de contactos Suscripción Ensayo - 21 artículos - 0 Comentarios - 489

[Tutorial] Habla sobre la aplicación de fuentes en diseño web (2) serif y sans-serif

Hola, hola a todos, soy yo otra vez~

La última vez hablamos brevemente sobre el conjunto de fuentes y algunas cuestiones básicas a las que prestar atención. Hoy continuamos con el tema de las fuentes y hablamos en profundidad sobre la "familia tipográfica universal" mencionada la última vez. La primera son las dos familias de fuentes generales más utilizadas, serif y sans-serif.

- serif

Serif se refiere a las fuentes serif en tipografía. Para comprender el concepto de fuentes serif, veamos primero algunos ejemplos típicos de fuentes serif:

fuente Georgia King

Times New Roman fuente Caracteres chinos

宋体

Las líneas horizontales cortas que sobresalen por encima y por debajo de la letra "M" en la palabra My son las llamadas serifas. De manera similar, hay serifas encima de y, encima y debajo de K, y debajo de i y n, por lo que estas fuentes se denominan fuentes serif. Pero no todas las fuentes serif necesariamente tienen serifas, como g, "汉" y "字" en el ejemplo anterior. De hecho, cualquier fuente que cumpla con el principio de refuerzo final es una fuente serif. El llamado fortalecimiento de los extremos consiste en utilizar serifas o cambios de grosor para fortalecer los extremos de los trazos de fuente y mejorar la legibilidad del texto pequeño. Por ejemplo, la parte inferior de y en el ejemplo anterior, así como los caracteres chinos en la fuente Song, usan trazos en negrita al final para lograr el efecto de fortalecimiento final. Además, muchas fuentes serif también utilizarán métodos como fortalecer los trazos verticales (por ejemplo, los trazos verticales en la Dinastía Song son más gruesos que los trazos horizontales) y exagerar los glifos (el más obvio es el carácter g minúscula) para mejorar aún más su legibilidad.

Debido a que las fuentes serif son muy legibles, se usan más comúnmente en trabajos que utilizan grandes bloques de texto como forma de expresión, como el texto principal de publicaciones o material impreso.

Las fuentes serif más comunes incluyen Georgia, Garamond, Times New Roman, Chinese Song Dynasty, etc.

- sans-serif

Todas las fuentes que no sean serif son fuentes sans serif. El prefijo sans- es en realidad francés, por lo que la pronunciación más estándar es /san/ en lugar de /sans/. Significa "sin". Entonces sans-serif es una fuente sans-serif.

Gut

Fuente Verdana Might

Escritura en fuente Arial

Círculo joven

La fuente Sans serif es más suave, Las líneas son generalmente uniformes en espesor. Es más adecuado para su uso como arte de palabras, títulos, etc. Debido a que las fuentes sans-serif suelen tener un grosor relativamente uniforme, la legibilidad se reducirá cuando se muestren fuentes pequeñas, lo que fácilmente provocará fatiga visual.

Las fuentes serif sin i comunes incluyen Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese Youyuan, Lishu, etc.

- ¿Cuándo usar serif? ¿Cuándo utilizar sans-serif?

De la introducción anterior, podemos saber que las fuentes serif están diseñadas para usarse en contenido de texto. Puedes coger un periódico y ver si el artículo que contiene pertenece a la dinastía Song. Si tiene a mano materiales de lectura en idiomas extranjeros, también puede consultarlos. El texto principal está en fuente serif.

Una fuente serif del mismo tamaño es más fácil de leer que una fuente sans-serif:

El rápido zorro marrón salta sobre el perro perezoso.

El rápido zorro marrón salta sobre el perezoso perro.

Luego, puede pasar el periódico a los titulares de la primera página; los titulares suelen tener fuentes variadas o fuentes medianas y negritas de varios grosores. La mayoría de los títulos de los periódicos ingleses también son sans-serif. Este es el principio básico de su aplicación.

Pero puedes consultar muchos sitios web: su contenido de texto es exactamente sans-serif Tahoma, Verdana, Arial, etc. La mayoría de los sitios web chinos todavía usan fuentes Song, quizás debido a las limitaciones de las fuentes, pero si observa sus hojas de estilo, encontrará que la mayoría de las fuentes alternativas son sans-serif. ¿No es esto malo?

Por supuesto que no.

La legibilidad de las fuentes serif en realidad sólo se refleja en fuentes pequeñas. Puede sacar el periódico que acaba de copiar y compararlo con el texto de su monitor; encontrará que el texto del periódico es un círculo más pequeño que el texto del monitor. De hecho, el tamaño de los caracteres de la dinastía Song en el Xinming Evening News es de solo 10 px ~ 11 px en un monitor LCD de alta calidad con un tamaño de punto de 0,25 mm en un monitor LCD normal (el tamaño de punto es generalmente de 0,28 mm); , incluso puede que solo sea equivalente a caracteres de visualización de 8 px ~ 10 px.

Esta es la mayor diferencia entre los medios impresos y los medios de pantalla. Para ahorrar costes, la industria gráfica imprimirá textos lo más pequeños posible garantizando al mismo tiempo la legibilidad. No existe ese costo para los monitores, por lo que se puede mostrar texto más grande. Las fuentes sans serif son igualmente legibles si el texto es lo suficientemente grande. Y como las fuentes sans-serif suelen ser artísticas, suelen ser más agradables a la vista cuando se muestran en un monitor y hay muchos más tipos de fuentes sans-serif que de fuentes serif, por lo que hay muchas opciones. Para que todos puedan usarlo con confianza. Sin embargo, se deben garantizar los siguientes principios: Cualquier uso de fuentes sans-serif debe garantizar la legibilidad en el texto principal. De lo contrario, utilice fuentes serif. En otras palabras, si desea utilizar una fuente sans-serif para mostrar el contenido del cuerpo de una página web, debe configurar el tamaño de fuente para que sea lo suficientemente grande como para garantizar que los usuarios puedan leerla fácilmente.

En cuanto a la configuración específica del tamaño de fuente, varía de una fuente a otra. 12px es suficiente para Verdana, pero para poder leer fácilmente el script oficial, es posible que necesites 24px o más.

Para fuentes en inglés de menos de 11 píxeles, se recomienda utilizar fuentes serif. En cuanto al chino, debido a las limitaciones de hardware del monitor, no importa qué fuente sea, no se recomienda utilizar un tamaño de fuente inferior a 11 píxeles para la visualización.

- Otras familias tipográficas generales

En tipografía, además de las serif y sans-serif, suelen existir fuentes monoespaciadas de igual ancho, escritura a mano (como la cursiva) y letras negras. Fuentes de plomo (también llamadas fuentes góticas góticas. Estrictamente hablando, muchas fuentes serif de uso común son en realidad fuentes góticas), fuentes decorativas ornamentales (fuentes con patrones decorativos en o alrededor de los trazos del texto. Son muy comunes en muchos libros medievales. Si La fuente estúpida realmente se ha convertido en una fuente, por lo que debe considerarse una fuente decorativa...) y una fuente simbólica (como la famosa boda123...).

Sin embargo, la definición de CSS de familias de fuentes universales es un poco diferente. Además de serif y sans-serif, CSS también permite las siguientes familias de fuentes generales:

fuentes monoespaciadas

Las llamadas fuentes monoespaciadas se refieren al ancho de cada carácter. fuentes. Un ejemplo famoso es la fuente Courier New. Debido a que los caracteres tienen el mismo ancho, son particularmente fáciles de alinear y pueden ubicar de manera rápida y precisa una determinada fila o columna, por lo que a menudo se usan para mostrar códigos.

Cabe señalar que una fuente monoespaciada también puede ser una fuente serif (o sans-serif).

Por ejemplo, la fuente Courier New también puede considerarse una fuente serif (estrictamente gótica).

Escritura cursiva: equivalente a la escritura a mano en tipografía. La cursiva china es una de esas fuentes.

Fantasía: equivalente al estilo decorativo en tipografía. Una fuente muy rara que prácticamente no tiene valor de referencia.

Cabe señalar que la familia de fuentes de símbolos no es compatible con CSS. Utilice imágenes cuando utilice fuentes de símbolos.

-Algunas cosas que no sabes

La negrita china es en realidad una fuente serif. Puedes mirar la imagen a continuación:

Como puedes ver, la negrita en realidad está reforzada en el extremo, por lo que muchos materiales impresos también usarán negrita. Una fuente como esta, que utiliza un suave refuerzo en los extremos y un grosor de trazo más o menos consistente, en realidad puede denominarse petit-serif/small serif. (Aquellas fuentes similares a las Song, que tienen una mejora significativa en los extremos y diferencias obvias en el grosor del trazo, generalmente se denominan slab-serif/serifs grabadas)

Es una lástima que, debido a muchas razones de hardware, el monitor Cuando En realidad, la negrita se muestra en la fuente, aún puedes considerarla como una fuente sans-serif

La cursiva no es cursiva

La cursiva es oblicua. La cursiva, como su nombre indica, es italiana. La cursiva es una forma de escribir (caligrafía), mientras que la oblicua es un estilo de impresión. Las dos son cosas diferentes. El método de escritura que se enseña en los libros de estudio de inglés de la escuela secundaria es el estilo italiano. Además del italiano, los métodos de escritura más populares incluyen la escritura francesa (la legendaria escritura cursiva, el nombre correcto es escritura francesa), la gótica, la escritura Abraham, etc.

Muchas fuentes sofisticadas personalizarán un conjunto especial de fuentes para fuentes italianas en lugar de simplemente mostrarlas en cursiva. Por ejemplo, en la imagen siguiente, tres líneas de texto están todas en fuente Georgia. La primera línea es normal; la segunda línea es oblicua, que está en cursiva y la tercera línea es la cursiva real.

Mira atentamente las letras a, l, i, e, etc. en la tercera fila; puedes ver claramente la diferencia. De hecho, Georgia Italic y Georgia son dos archivos de fuentes diferentes en el sistema. Cuando especificamos el estilo de fuente: cursiva, el sistema buscará automáticamente si existe la fuente Georgia Italic e intentará usar esta fuente para mostrar contenido de texto.

Es lógico que cuando usamos font-style: oblique para especificar el estilo de fuente, el navegador no debería buscar la fuente Georgia Italic, sino mostrar directamente la fuente Georgia de forma oblicua, por lo que, en teoría, deberíamos obtener la segunda fuente en la imagen. El efecto del texto de línea. Desafortunadamente, incluso la propia implementación de referencia del W3C en la especificación CSS dice "si UA no puede mostrar cursiva y oblicua correctamente, puede usar cursiva para mostrar oblicua". Por lo tanto, casi ningún navegador implementa la distinción entre cursiva y oblicua. Incluso si el estilo de fuente que configuró es oblicuo, encontrará que el navegador aún muestra cursiva.

Eso es todo por hoy. En la próxima conferencia, hablaré sobre cómo crear una familia de fuentes razonable y recomendaré varias combinaciones de fuentes a todos.

Entonces, adiós

Etiqueta: principiante, tutorial, diseño VI, experiencia, fuente, fuente, css, familia de fuentes

publicado @ 2008-05-06 00:19 Lectura del oso pardo (5219) Comentarios (37) Editar colección Extracto de red Categoría: Estándares CSS, consulte también diseño de VI estándar

Publicar un comentario

Responder a la cita Vista n.º 1F 2008-05-06 01 :31 | Jing Tao

Sofa

Respuesta a la cita #2F 2008-05-06 06:02 | Feixueer [usuario no registrado]

Sí, lo tengo Estudié fuentes serif sans-serif antes, pero me gusta mucho la sans-serif Microsoft YaHei. Es mucho mejor que Song Dynasty en términos de pantalla LCD y rendimiento de impresión.

Responder a la cita Ver #3F 2008-05-06 07:25 | Sashimi

Aprende

Responder a la cita #4F 2008-05-06 07: 30 | Yan Teng [usuario no registrado]

Hay algo mal con la captura de pantalla de las larvas redondas~

No es como las larvas redondas

Pero este artículo es bueno. , Favorito:)

Responder Cita #5F 2008-05-06 07:49 | zjfeiye [Usuario no registrado]

Buen artículo, aprendí mucho, muchas cosas las he aprendido antes No sé por qué, solo sé cómo usarlo.

Además, a menudo veo media="screen" en el enlace introducido por CSS. ¿Es esto lo que mencionaba el cartel original?

Responder a la vista de cotización Piso n.° 6 2008-05-06 08:22 | /p >

Muy buenos y profesionales. Todo conocimiento en el mundo es conocimiento. Este blog también es muy singular.

Responder a la vista de cotización Piso #8 2008-05-06 09:27 | Yannic Yang

He estado pensando si es mejor usar Yahei o Song Dynasty en mi dopod. teléfono

Hay una respuesta~ Es bueno verlo claramente

Decidí usar Yahei y agrandar la fuente

Además

Siento que este CSS se ha vuelto cada vez más maduro en los últimos años...

El soporte en todos los aspectos es muy detallado

Todavía estoy atrapado en el era de discutir si usar tabla o div hace unos años

El malvado ie6...

Responder a la cita Vista #9 Piso 2008-05-06 09:44 | quieres amar, solo amar

La investigación es bastante profunda

Responder a la cita Ver #10th floor 2008-05-06 09:44 | airwolf2026

mark

Respuesta a la cita #11th Floor 2008-05-06 09:48 | un granjero [usuario no registrado]

Tienes mucho talento. ¿Puedo preguntarte qué herramienta usaste para hacer? ¿Los pequeños íconos monocromáticos en mi guardarropa? He estado investigando xara xtreme recientemente. ¿Lo ha usado el cartel?

Responder Cita Vista Piso #12 2008-05-06 10:06 |

La gran palabra "prohibido" en el medio me sorprendió, pensé que eran 18 sitios web prohibidos. Jajaja. . .

Responder a la cita Ver #13F 2008-05-06 10:07 | Yang Zhengyi (Ah Yi)

@zjfeiye

Ese es el terminal para especificar css.

Monitor, impresora o algo más...

Responder a la cita Vista #14 Piso 2008-05-06 10:42 | para citar Ver #15th Floor [Propietario] 2008-05-06 10:49 | Oso pardo

@彦vine

Eso no es una captura de pantalla, es texto real

@ Yannic Yang

La ventaja de Yahei es que es una fuente especialmente diseñada para visualización, por lo que ha sido optimizada para visualización, por lo que, naturalmente, es una opción ideal.

@一Farmer

¿No sé de qué ícono estás hablando? La mayoría de las imágenes de mi guardarropa son creadas con Photoshop (y no por mí)

Generalmente, cuando hago mi propio diseño gráfico, uso el conjunto de Adobe y rara vez se utiliza otro software de diseño gráfico <. /p>

@杨正祎(阿一)

Esto es jajaja, usado para probar el carácter...

Es broma. De hecho, este carácter se utiliza porque contiene trazos horizontales y verticales, y la densidad de trazos es muy adecuada para la demostración.

Responder Cita Ver #16F 2008-05-06 10:58 | Locura en Calma

Muy bien, me gusta mucho.

Responder Cita #17F 2008-05-06 12:03 | sorcom [Usuario no registrado]

Realmente impresionante. Sin embargo, la página siempre tarda en abrirse.

Responder Cita Vista #18 Piso 2008-05-06 12:42 | Cat Chen

De hecho, hay muy pocas personas que estudian fuentes en chino. Es fantástico tener a alguien hablando de ello. problemas de fuentes.

Respuesta a la cita #19F 2008-05-06 15:11 | soaroaroar [usuario no registrado]

Ejem... Esto... De hecho, siempre y cuando el contenido de este artículo es serio. Todos los que han usado fuentes y navegadores en el entorno Linux lo saben... No es nuevo, pero todavía estoy muy agradecido con el autor original por su arduo trabajo ~ Esto es muy importante para educar a la comunidad de desarrollo de IE con un estrecho visión

Respuesta a la cita Vista #20 Piso 2008-05-06 20:58 | Programador de segunda mano

Las dos palabras "caracteres chinos" usan la fuente predeterminada de la página web Cuando el usuario configura la fuente predeterminada de la página web con otras fuentes, no se mostrará como Song Dynasty.

Responder a la cita Vista #21 Floor [Propietario] 2008-05-07 00:17. | Oso Pardo

@programador de segunda mano

Esto en realidad es un problema con el alias del nombre de fuente

Debido a que este blog está escrito usando Live Writer, Live Writer automáticamente convertí el nombre de la fuente china en el código fuente sin siquiera prestar atención. Se ha convertido en un alias, por lo que solo funciona normalmente en IE

Ahora lo he cambiado en el editor del parque de blogs, y debería. estar bien

Responder a la vista de cita #22F 2008-05 -07 09:37 | Programador de segunda mano

Parece que tú también eres una persona que persigue la perfección

Responder a la cotización Vista #23 Piso 2008-05-07 11:11 | Wolf Robot

Aprendizaje

Responder a la cotización Vista #24 Piso 2008-05-07 12: 18 | Rivers Zhao

El cartel tiene mucho conocimiento

Respuesta a la cita Vista #25 2008-05-07 13:02 | ¡Esperamos con ansias la próxima conferencia! ! !

Responder a la cita Ver #26 Piso 2008-05-09 10:08 | jason_lb

Debe leer cada conferencia rss, es muy cómodo navegar bajo Firefox

Responder a la cita Vista #27 Piso 2008-05-11 10:22 | jasonoiu

Es realmente bueno, aprendí mucho.

¡Esperamos con ansias tu próxima conferencia!

Responder a la cotización Vista #28 Piso 2008-05-11 23:13 | volnet (puedes llamarme Big V)

El blogger me cuenta muchas cosas que tengo Nunca había oído hablar de eso antes, estoy muy emocionado...

Estoy muy preocupado por la diferencia entre oblicuo y cursiva. ¿Cómo lo supo el cartel original? El que encontré accidentalmente fue investigado especialmente. ¿Qué pasa con el motivo? Jaja, si no me dijeras que hay una diferencia entre los dos, no lo sabría en absoluto. Ja ja.

Respuesta a la cita #29 Floor 2008-05-25 21:37 | hax [Usuario no registrado]

No es una limitación de hardware que los caracteres chinos no deban tener menos de 11px, pero que no hay ningún entramado por debajo del carácter de 11px. En cuanto a los caracteres vectoriales, debido a que los caracteres chinos tienen muchos trazos, es difícil reducirlos a una determinada proporción y seguir siendo legibles. Los caracteres occidentales utilizan tecnología de sugerencias para mejorar las fuentes vectoriales en resoluciones pequeñas, pero es difícil hacer esto con los caracteres chinos porque hay demasiados caracteres y el costo de producir sugerencias es demasiado alto.

Responder a la cita #30 Floor 2008-06-01 11:42 | southsiberia [Usuario no registrado]

Niu, tengo dos preguntas para ti, el cirílico y el árabe son todos textos en pinyin. A diferencia del chino, por ejemplo, si la computadora local del usuario no tiene fuentes relacionadas, el sitio web generalmente se convertirá en un archivo EOT y estas fuentes de texto se cargarán automáticamente cuando el usuario abra la página web por primera vez (yo tengo). hecho EOT más de 10 veces), pero a veces falla y otras veces tiene éxito inexplicablemente, ¡lo que deja a la gente sin palabras!), ¿existe alguna alternativa además de flash vector (ni siquiera lo sé)?

Hay otro problema: cuando se mezcla con chino, si los caracteres chinos son de 12 píxeles, puede verse bien, pero para el árabe, si el tamaño de fuente es demasiado pequeño, es posible que no se vea bien. Cómo definir los diferentes tamaños de fuente. personajes?

Responder a la cotización Vista #31 Piso [Propietario] 2008-06-03 10:31 | Oso pardo

--Cita------------ -- ------------------------------------

southsiberia: Maldita sea, yo Tengo dos preguntas para usted. El cirílico y el árabe son textos pinyin, a diferencia del chino. Por ejemplo, si la computadora local del usuario no tiene las fuentes relevantes, el sitio web generalmente se convertirá en un archivo EOT, que se creará automáticamente. Se cargan cuando el usuario abre la página web por primera vez. Estas fuentes de texto (he creado archivos EOT más de 10 veces, pero a veces fallan y otras tienen éxito inexplicablemente, ¡lo que deja a la gente sin palabras!), ¿Existe alguna alternativa además de flash? vector (yo tampoco lo sé muy bien).

Otro problema es que cuando se mezclan árabe y chino, si los caracteres chinos son de 12 píxeles, puede verse bien, pero para el árabe, si el tamaño de fuente Es demasiado pequeño y puede que no se vea bien. ¿Cómo definir los tamaños de fuente de diferentes caracteres por separado?

------------------------------------------- ----- -------------

Esto no se ha estudiado en detalle. El soporte de @font-face en varios navegadores es relativamente débil, sin mencionar. ¿Que el archivo ms EOT es solo IE?

En cuanto al tamaño de fuente, en realidad existe una regla CSS llamada font-size-adjust, pero desafortunadamente no todos los navegadores convencionales la admiten. En la actualidad, puede agregar un fuera de esta disposición mixta de caracteres chinos y luego establecer el estilo de este lapso, Jiangzi

Responder a la cita Ver # 32 Piso [Autor original]2008-06-03 10:33 | Oso Pardo

--Cita----------------------- --------- ---------------------

volnet (puedes llamarme Big V): Los bloggers me dejan Sé muchas cosas de las que nunca había oído hablar antes, estoy muy emocionado...

------------------------------------------- ----- -------------

Esto lo aprendí cuando estudiaba imprenta, jaja

Responder a la cita #33 Piso 2008- 06-03 19:14 | southsiberia [Usuario no registrado]

Gracias por la respuesta, estoy muy deprimido. . . . . . . . . . .

Responder a la cita Vista #34 Piso 2008-06-15 11:43 | Joyaspx

Es realmente muy profesional y tengo un mejor conocimiento de las fuentes...

Responder a la cita #35F 2008-11-14 15:44 | No no [usuario no registrado]

Buen artículo. Hay que apoyarlo.

Respuesta a la cita #36F 2009-02-19 23:31 | eddie yang [usuario no registrado]

He estado usando Georgia cursiva durante mucho tiempo y ahora sé que lo es. no en cursiva.

Responder a la cita Vista #37 Piso 2009-04-11 19:51 | Aaron@Live

Hazle una pregunta al blogger:

Más de uno El idioma del sitio web es principalmente chino e inglés, que pueden ampliarse en el futuro. ¿Cómo configurar el orden de fuente predeterminado del sitio web en CSS para lograr la mejor legibilidad y estética del sitio web?

¡Gracias!

Actualizar plantilla de cambio de lista de comentarios

Publicar un comentario

Nombre [Iniciar sesión] [Registrarse] Introduzca su nombre

Página de inicio

Correo electrónico (visible solo para bloggers) La dirección de correo electrónico no es válida

Ingrese el código de verificación

El código de verificación* no se puede ver claramente, por favor cámbielo

Contenido (no publique nada relacionado con política) Ingrese el contenido del comentario

¿Quiere saber cuántas programadoras hay en el jardín?

[Tema candente] Desafío de programación "Youdao Dilemma"

Grupo de novatos .NET

Canal .NET de Blog Park

¿Recuerdasme?

Inicia sesión para usar comentarios avanzados Registro de nuevo usuario Volver al inicio

[Utiliza las teclas Ctrl+Intro para enviar directamente]

Navegación: página de inicio Comunidad Noticias Blog Pregunte a Flash Memory Net Recruitment Base de conocimientos del canal .NET Busque la búsqueda en el sitio de Google

¡Tienda en línea de libros de computadora China-pub! ¡20-20 % de descuento en 65 000 variedades!

Servicio de impresión por computadora bajo demanda de China-Pub para libros agotados

Quiero la historia de serif y sans serif~~Gracias a todos.

Artículos populares