html agregar - Usando fuentes.otf en navegadores web




css para (3)

Puedes implementar tu fuente OTF usando @ font-face como:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Sin embargo, si desea admitir una amplia variedad de navegadores modernos, le recomendaría que cambie a los tipos de fuente WOFF y TTF . WOFF tipo WOFF se implementa en todos los navegadores de escritorio principales, mientras que el tipo TTF es una alternativa para los navegadores Safari, Android e iOS más antiguos. Si su fuente es libre, puede convertirla utilizando, por ejemplo, un convertidor de fuente en onlinefontconverter .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Si desea admitir casi todos los navegadores que aún existen (no es necesario, IMHO), debe agregar algunos tipos de fuentes más como:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Puede leer más acerca de por qué se implementan todos estos tipos y sus trucos here . Para obtener una vista detallada de qué tipos de archivos son compatibles con los navegadores, consulte:

Soporte del navegador @ font-face

Soporte de navegador EOT

Soporte de navegador WOFF

Soporte de navegador TTF

Soporte SVG-Fonts Browser

espero que esto ayude

Estoy trabajando en un sitio web que requiere pruebas de fuentes en línea, las fuentes que tengo son todas .otf

¿Hay alguna forma de incrustar las fuentes y hacer que funcionen en todos los navegadores?

Si no, ¿qué otras alternativas tengo?


De los ejemplos del directorio de fuentes de Google :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Esto funciona en todos los navegadores con .ttf, creo que puede funcionar con .otf. ( Wikipedia dice .otf es mayormente compatible con .ttf) Si no, puedes onlinefontconverter .otf a .ttf

Aquí hay algunos buenos sitios:


Aunque esta solución se realiza con jQuery I, puede ser útil para cualquier persona que haga columnas para ajustar el tamaño de la pantalla.

Para las columnas que comienzan en la parte superior de la página, esta solución es la más sencilla.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Para las columnas que no comienzan en la parte superior de la página (por ejemplo: si comienzan debajo del encabezado).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

El primer método aplica la altura del cuerpo a él y también a las columnas, lo que significa que es starting_pixels + height100% .

El segundo método obtiene la altura de la página que se muestra al usuario al obtener la altura del cuerpo y luego resta el tamaño del encabezado para saber cuánta altura queda para mostrar la columna.







html css fonts font-face