css - personalizadas - fuentes html para web
¿Utiliza fuentes personalizadas usando CSS? (7)
He visto algunos sitios web nuevos que usan fuentes personalizadas en sus sitios (que no son Arial, Tahoma, etc.).
Y admiten una buena cantidad de navegadores.
¿Cómo hace uno eso? Al mismo tiempo, impide que las personas tengan acceso libre para descargar la fuente, si es posible.
Actualmente, hay cuatro formatos de contenedor de fuentes en uso en la web: EOT, TTF, WOFF, y WOFF2.
Desafortunadamente, a pesar de la amplia gama de opciones, no hay un solo formato universal que funcione en todos los navegadores antiguos y nuevos:
- EOT es solo IE,
- TTF tiene soporte parcial de IE,
- WOFF goza del mayor soporte pero no está disponible en algunos navegadores más antiguos
- El soporte WOFF 2.0 es un trabajo en progreso para muchos navegadores.
Si desea que su aplicación web tenga la misma fuente en todos los navegadores, es posible que desee proporcionar los 4 tipos de fuente en CSS
@font-face {
font-family: ''besom''; !important
src: url(''fonts/besom/besom.eot'');
src: url(''fonts/besom/besom.eot?#iefix'') format(''embedded-opentype''),
url(''fonts/besom/besom.woff2'') format(''woff2''),
url(''fonts/besom/besom.woff'') format(''woff''),
url(''fonts/besom/besom.ttf'') format(''truetype''),
url(''fonts/besom/besom.svg#besom_2regular'') format(''svg'');
font-weight: normal;
font-style: normal;
}
Estoy trabajando en Win 8, use este código. Funciona para IE y FF, Opera, etc. Lo que entendí es que la fuente woff es liviana y común en las fuentes de Google.
Vaya here para convertir su fuente ttf a woff antes.
@font-face
{
font-family:''Open Sans'';
src:url(''OpenSans-Regular.woff'');
}
Genéricamente, puede usar una fuente personalizada usando @font-face en su CSS. Aquí hay un ejemplo muy básico:
@font-face {
font-family: ''YourFontName''; /*a name to be used later*/
src: url(''http://domain.com/fonts/font.ttf''); /*URL to font*/
}
Entonces, trivialmente, para usar la fuente en un elemento específico:
.classname {
font-family: ''YourFontName'';
}
( .classname es tu selector).
Tenga en cuenta que ciertos formatos de fuente no funcionan en todos los navegadores; puede usar el generador de fontsquirrel.com para evitar demasiada conversión de esfuerzo.
Puede encontrar un buen conjunto de fuentes web gratuitas proporcionadas por Google Fonts (también tiene reglas autogeneradas CSS @font-face , para que no tenga que escribir las suyas propias).
a la vez que evita que las personas tengan acceso libre para descargar la fuente, si es posible
No, no es posible darle un estilo a tu texto con una fuente personalizada incrustada mediante CSS, a la vez que evitas que la gente la descargue. Necesita usar imágenes, Flash o el lienzo HTML5 , todos los cuales no son muy prácticos.
Espero que haya ayudado!
Para asegurarse de que su fuente sea compatible con varios navegadores, asegúrese de usar esta sintaxis:
@font-face {
font-family: ''Comfortaa Regular'';
src: url(''Comfortaa.eot'');
src: local(''Comfortaa Regular''),
local(''Comfortaa''),
url(''Comfortaa.ttf'') format(''truetype''),
url(''Comfortaa.svg#font'') format(''svg'');
}
Tomado de here .
Si no encuentra las fuentes que le gustan de Google.com/webfonts o fontsquirrel.com, siempre puede hacer su propia fuente web con una fuente que haya creado.
aquí hay un buen tutorial: crea tu propio juego de fuentes web de fuentes de fuentes
Aunque no estoy seguro de evitar que alguien descargue su fuente.
Espero que esto ayude,
Tienes que descargar el archivo de fuente y cargarlo en tu CSS.
Fe Estoy usando la fuente Yanone Kaffeesatz en mi aplicación web.
Lo cargo y lo uso a través de
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
en mi hoja de estilos