Open Sans Condensed Light не работает в Firefox

Question

Я скачал шрифт Open Sans Condensed Light из Google Web Fonts, а также прикрепил их код CSS:

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

Но каждый браузер, кроме Firefox, показывает точное семейство шрифтов, т.е. он отлично смотрится в IE, Chrome, Safari, но не в Firefox.

Вот мой CSS и 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>

Можете ли вы предложить, как я должен исправить Firefox по этому поводу?

Answer 1

Согласно API, вы должны называть шрифт следующим образом

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

Вариант light необходимо вызывать специально, т.е. :light.

Другие браузеры, вероятно, игнорируют Light в вашей таблице стилей и дают вам Open Sans Condensed, который вы запрашивали в вызове API.

Смотрите здесь

Answer 2

Condensed - это стиль шрифта «Open Sans», а не часть имени. Это сработало для меня.

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


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

Answer 3

Я, должно быть, попробовал несколько вариантов, чтобы получить эту работу. Я пытаюсь встроить Open Sans Condensed в pdf через WKHtmlToPdf.

Я думаю, важно загрузить и установить Open Sans Condensed ttf прямо из Google и установить его. Также важно перезагрузить компьютер, чтобы разрешить доступ другим службам после установки. Я загрузил ttf из font-squirrel первоначально, и сжатый был указан как «Open Sans» в окнах / шрифтах, что неправильно, если вы посмотрите после установки Google, он будет указан как «Open Sans Condensed Light», так что даже в Google 100 * Сценарий неверен.

Как уже упоминалось ранее, вам нужно явно указывать растяжение и вес, так что вот что сработало для меня:

    @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');}

Answer 4

Чтобы шрифт работал для IE8-IE9, вы должны использовать файл шрифта EOT. На этой странице вы можете скачать шрифт в виде веб-набора: http://www.fontsquirrel.com/fonts/open-sans-condensed

Answer 5

Вам, вероятно, следует использовать font-stretch: condensed (, см. Документы Mozilla ).

Например, измените свой .heading-sub CSS следующим образом:

.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;
}

Answer 6

Вы должны обратиться к Google CSS. См. Их Краткое руководство по началу работы .

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

Answer 7

Это не работает для меня, потому что @import должен быть первой строкой в ​​стиле.

Работает:

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

    .myStyle {
    }
</style>

Не работает:

<style>
    .myStyle {
    }

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

Answer 8

Похоже, что все браузеры так или иначе используют разные определения по крайней мере для этого шрифта.я установил его на своем сайте и пытался понять, как сделать так, чтобы он выглядел по-нисходящему во всех браузерах, а не только в Chrome и Opera - как и во всех других, то есть в Firefox, то есть, и в Safari эти шрифты были прикручены.пока случайно я не заставил Firefox увидеть шрифт в порядке, но потом хром и опера были испорчены.так что именно тогда я понял, что на самом деле назначение одного и того же шрифта двумя разными способами решает проблему: если браузер в порядке с первым определением, он не будет смотреть на следующее, в противном случае он пойдет для второго.ах, сам код:

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

я использовал его для назначения шрифтов различным элементам div.ура, надеюсь, это поможет - по крайней мере, для меня это было основной болью в спине.

Answer 9

для Firefox: Моя проблема решена после того, как я добавил в CSS эту строку:

шрифт-стретч: сжатый;

Вы должны использовать сгенерированный Google код, мой был: http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel = 'stylesheet' type = 'text / css'>

так как я использую 700 и 300 гирь.

CSS: семейство шрифтов: «Open Sans Condensed», без засечек; начертание шрифта: 700; font-stretch: сжатый;

Answer 10

Используйте Google Fonts Open Sans в различных стилях:

Нажмите на эту ссылку -> https://www.google.com/fonts/specimen/Open+Sans, а затем нажмите Открыть Open Sans в Google Fonts.

В опциях 3 и 4 вы найдете ссылку html для использования в вашем заголовке, а также использование стиля CSS.