web-dev-qa-db-fra.com

Open Sans Condensed Light ne fonctionne pas dans Firefox

J'ai téléchargé la police Open Sans Condensed Light à partir de Google Web Fonts, ainsi que son code CSS:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
      rel='stylesheet' type='text/css'>

Mais tous les navigateurs autres que Firefox affichent la famille de polices exacte, c’est-à-dire qu’ils ont l’air parfait dans IE, Chrome, Safari, mais pas dans Firefox.

Voici mon CSS et le code HTML:

h2.title-border {
    border-bottom: 1px solid #000;
    margin-top: 10px;
    line-height: 45px;
    margin-bottom: 15px;
}

.heading-sub {
    background: #000;
    font-family: "Open Sans Condensed Light";
    font-weight: normal;
    text-transform: none;
    font-size: 32px;
    padding: 0 15px;
    margin-bottom: 0px;
    color: #fff;
    border-bottom: 1px solid #000;
}

HTML:

<h2 class="title-border"><span class="heading-sub">About Us</span></h2>

Pouvez-vous s'il vous plaît suggérer, comment dois-je réparer Firefox à ce sujet?

htmlcssgoogle-font-api
10
Balkar Kalsi

Selon l'API, vous devriez appeler la police comme ceci

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>

La variante light doit être appelée spécifiquement, c'est-à-dire :light.

Les autres navigateurs ignorent probablement la Light dans votre feuille de style et vous donnent le Open Sans Condensed que vous avez demandé dans l'appel d'API. 

Vois ici

14
Jason Gennaro

Condensed est le "style" de la police "Open Sans" et ne fait pas partie du nom. Cela a fonctionné pour moi.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />


.selector
{
    font-family:'Open Sans';
    font-style:condensed;
}
6
wcloister

Pour que la police fonctionne avec IE8-IE9, vous devez utiliser un fichier de police EOT, Sur cette page, vous pouvez la télécharger en tant que kit Web: http://www.fontsquirrel.com/fonts/ open-sans-condensed

2
drougen

Je dois avoir essayé des variations gazillion pour obtenir ce travail. J'essaie d'intégrer Open Sans Condensed à un fichier PDF via WKHtmlToPdf.

Je pense qu'il est important de télécharger et d'installer Open ttf Open Sans Condensed directement à partir de Google et de l'installer. Il est également important de redémarrer pour autoriser l'accès à d'autres services après l'installation. J'ai téléchargé le fichier ttf à partir de font-squirrel à l'origine et condensé était répertorié comme "Open Sans" dans windows/fonts, ce qui est faux, si vous prenez en charge l'installation de Google, il est répertorié sous le nom "Open Sans Condensed Light". Même le script local('Open Sans Cond Light') de Google est faux. 

Comme mentionné précédemment, vous devez être explicite avec l'étirement et les poids, voici donc ce qui a fonctionné pour moi:

    @font-face { 
     font-family: 'Open Sans'; 
     font-style: normal; 
     font-weight: 400; 
     src: local('Open Sans');
    }

    @font-face { 
     font-family: 'Open Sans Condensed'; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Open Sans Condensed Light');
    }

@@font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
2
jenson-button-event

Vous devriez probablement utiliser font-stretch: condensed ( voir la documentation de Mozilla ).

Par exemple, modifiez votre CSS .heading-sub comme suit:

.heading-sub {
    background:#000;
    font-family:"Open Sans";
    font-stretch: condensed;
    font-weight:300;
    text-transform:none;
    font-size:32px;
    padding:0 15px;
    margin-bottom:0px;
    color:#fff;
    border-bottom:1px solid #000;
}
1
sampablokuper

Vous devez vous référer à Google CSS. Voir leur Guide de démarrage rapide .

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
1
Giann

pour Firefox: Mon problème résolu après avoir ajouté cette ligne à CSS:

font-stretch: condensé;

Vous devez utiliser le code généré par Google, le mien était: http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300 'rel =' feuille de style 'type =' text/css '>

comme je suis en utilisant 700 et 300 poids.

CSS: font-family: 'Open Sans Condensed', sans-serif; Font-weight: 700; Font-stretch: condensed;

0
Yerbol

il semble que tous les navigateurs utilisent en quelque sorte des définitions différentes pour au moins cette police. Je l'avais installé sur mon site et j'essayais de trouver un moyen de faire en sorte qu'il paraisse en baisse dans tous les navigateurs, pas seulement chrome et opéra, comme dans tous les autres, c'est-à-dire firefox, c'est-à-dire que Safari avait vissé ces polices. jusqu’à ce que j’ai accidentellement fait voir à firefox la police, mais chrome et opéra se sont fait avoir. C'est donc à ce moment-là que j'ai réalisé que le fait d'attribuer la même police de deux manières différentes résout le problème: si le navigateur accepte la première définition, il ne se penchera pas sur la suivante, sinon la deuxième sera utilisée. ah, le code lui-même:

font-family: open sans condensed light, open sans condensed;

je l'ai utilisé pour attribuer des polices à différents divs. Bravo, espérons que cela aide - au moins pour moi ce fut une douleur majeure dans le derrière.

0
Alex

Utilisez Google Fonts Open Sans dans les différents styles:

Cliquez sur ce lien -> https://www.google.com/fonts/specimen/Open+Sans puis cliquez sur Open Open Sans dans Google Fonts.

Sous les options 3 et 4, vous trouverez le lien html à utiliser dans votre en-tête, ainsi que l’utilisation du style CSS.

0
Jason Ebersey

Cela ne fonctionne pas pour moi car @import devrait être la première ligne du style.

Travaux:

<style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

    .myStyle {
    }
</style>

 Ne fonctionne pas:

<style>
    .myStyle {
    }

    @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>
0
Ilya Kanatov