Una breve discusión sobre la configuración de fuente (font-family) y el grosor (font-weight) de la página
Recuerdo que cierta persona fue "abusada sexualmente" por un diseñador una mañana. Todavía lo recuerdo vívidamente. Fue por el problema de fuente en un proyecto (PC y móvil) con el que luché toda la mañana. El diseñador insistió en que el efecto de la fuente se mantuviera coherente con el borrador del diseño. En ese momento me quedé sin palabras, pero dicho esto, todos lo están haciendo por la calidad del proyecto, así que hay que calmarnos y reflexionar, así "nació" el tema que quiero compartir esta tarde: la configuración de fuentes en CSS.
Hablar de "fuentes en CSS" es un tema común. Los zapatos para niños que han hecho diseño y front-end conocerán algunos de los "misterios". En el trabajo diario, al completar un proyecto, desde el borrador del diseño hasta el efecto final de la página, en lo que respecta a las fuentes, los niños cuidadosos encontrarán que hay muchos aspectos del trabajo detallado por hacer. basado en los requisitos muy exigentes del propio proyecto. Esta tarde discutiremos dos aspectos: configuración (fuente-familia) y grosor (fuente-peso).
Al escribir estilos globales, estableceremos una fuente predeterminada. Por ejemplo:
En la configuración anterior, la fuente preferida en la página es una fuente cuadrada si no hay cuadrada. fuente en la computadora, la fuente es Microsoft Yahei, etc.
Al configurar algunas fuentes chinas, a algunos niños (yo en el pasado) les gusta usar el chino directamente. Muy bien, es mejor volver a Unity. En inglés, aquí hay algunas fuentes de uso común para convertir chino a inglés:
Puede recopilarlas para consultarlas fácilmente.
Hasta donde yo sé, ya sea para PC o dispositivo móvil, las fuentes predeterminadas actuales de los diseñadores generalmente usan "Microsoft Yahei", "Microsoft Heilong" y "Square Font" para chino. opciones, las más utilizadas incluyen arial, etc. Debido a que el equipo de PC es insuficiente, actualmente solo está disponible WINDOWS y el efecto no es muy diferente del borrador del diseño. Pero a veces nos enredamos en el lado móvil. La razón es que no entendemos las fuentes predeterminadas que vienen con diferentes dispositivos móviles. Cuando estás luchando con el diseñador sobre este asunto, como ingeniero de asedio frontal, necesitas obtener alguna evidencia para discutir con ellos. De la siguiente manera:
La fuente china predeterminada es Heiti SC
La fuente inglesa predeterminada es Helvetica
La fuente digital predeterminada es HelveticaNeue
Sin fuente Microsoft Yahei
La fuente china predeterminada es Droidsansfallback
La fuente digital y en inglés predeterminada es Droid Sans
Sin fuente Microsoft Yahei
La fuente china predeterminada es Dengxian (Fundador isolineal)
La fuente predeterminada en inglés y digital es Segoe
No hay una fuente Microsoft Yahei
Puede ser Descubrí que no hay ninguna fuente Microsoft Yahei en ios, android o wp. Luego hice una pequeña prueba para comparar el efecto de la fuente Microsoft Yahei con el efecto de la fuente predeterminada de cada sistema. La fuente utilizada en la página es difícil de leer a simple vista. Sus diferencias casi no tienen impacto en la experiencia del producto.
Cada sistema de telefonía móvil tiene su propia fuente predeterminada y ninguno de ellos es compatible con Microsoft Yahei.
Si no hay requisitos especiales, no es necesario definir fuentes chinas en el teléfono móvil y se utilizará la predeterminada del sistema.
Helvetica se puede utilizar para fuentes en inglés y fuentes digitales, y es compatible con los tres sistemas.
Vale, la evidencia es concluyente. Si el diseñador necesita utilizar algunas fuentes especiales en inglés, como la hermosa din1451a, akzidenzgrotesk-cond, etc., debemos convertirlas y luego hacer referencia a ellas con @font-face. No hay mucho que decir sobre este método, por lo que. fácil
Hablemos mucho sobre el tema de la configuración de fuentes (font-family). Siguiente pregunta: peso de fuente CSS.
Primero, comprendamos los valores de atributos básicos de font-weight, como se muestra en la siguiente tabla:
400 equivale a normal y 700 equivale a negrita. .
heredar especifica que el peso de la fuente debe heredarse del elemento principal.
Sin embargo, el efecto no es evidente. Intente cambiar la fuente. Sin embargo, entre las fuentes chinas más comunes, la negrita parece ser más gruesa. Veamos un ejemplo simple, el efecto en el lado de la PC del sistema WINDOWS:
El grosor de la fuente se puede ajustar fácilmente según la configuración del valor. Los niños cuidadosos han descubierto lo que sucederá si se configura el peso de fuente: 901, y qué efecto será si se configura el peso de fuente: 99, jaja _, no te lo diré, puedes intentarlo. La empresa es pobre y no ofrece equipos de alta gama. En cuanto al efecto audaz de la PC en otros sistemas, puede probarlo. El enfoque del que quiero hablar es el lado móvil.
Si está familiarizado con las primeras versiones de Android e IOS, encontrará que sus atributos de fuente en negrita son muy confusos y su soporte no es muy bueno. No importa cómo lo configure, no funcionará. Para decirlo sin rodeos, es un ERROR del sistema. Aquí no discutiremos esos viejos problemas, queremos analizarlos primero.
Las diferencias en la configuración de fuentes CSS (font-family) y el grosor (font-weight) en diferentes dispositivos y sistemas traerán algunos inconvenientes a los ingenieros de front-end al desarrollar proyectos, especialmente en terminales móviles. Por ejemplo, quiero usar un carácter especial: estrella de cinco puntas, flecha, punto, flecha, etc., y usar la fuente para configurar directamente el efecto. El efecto final no es satisfactorio. La alternativa es usar CSS3, gráfico y base64, etc.
OK, eso es todo, espero que pueda ayudar a todos.