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

Я загрузил шрифт 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 относительно этого?

Ответ 1

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

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

Легкий вариант нужно называть конкретно, т.е. :light.

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

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

Ответ 2

Сжатый "стиль" шрифта "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;
}

Ответ 3

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

Ответ 4

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

Я думаю, что очень важно загрузить и установить Open Sans Condensed ttf прямо из Google и установить его. Также важно перезагрузиться, чтобы разрешить другим службам доступ после установки. Я загрузил ttf из font-squirrel изначально, и сжатый был указан как "Open Sans" в windows/fonts, что неверно, если вы посмотрите на установку Google, он указан как "Open Sans Condensed Light", поэтому даже google local('Open Sans Cond Light') script неверен.

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

font-stretch: сжатый;

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

поскольку я использую 700 и 300 весов.

CSS: font-family: 'Open Sans Condensed', sans-serif; начертание шрифта: 700; font-stretch: сжатый;

Ответ 9

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

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

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

Ответ 10

Это не работает для меня, потому что @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>