Переопределение @font-face src URL?

Мы используем FontAwesome с Bootstrap. Однако, когда мы пытаемся использовать FA с нашим пользовательским minifier, он пытается загрузить шрифты с относительного пути, который возвращает 404, из-за того, как настроена структура миниатюрных URL.

Итак, мы решили, что лучший способ исправить это - добавить дополнительный CSS файл в наш список minify, который заменит URL-адреса src @font-face, используемые шрифтом FontAwesome. В основном мы просто скопировали определение @font-face из FontAwesome и указали абсолютные адреса URL.

Однако теперь происходит то, что наши правильные URL-адреса загружают шрифты И изначально заданные URL-адреса из FontAwesome CSS предпринимаются (приводя к тем же ошибкам 404, что и раньше).

Делаем ли мы что-то неправильно или нет способа переопределить URL-адреса src-шрифта @font-face, чтобы полностью исключить определения "вверх по течению"?

Ответ 1

Просто переопределить семейство шрифтов базового класса CSS:

.fa {
  font-family: 'FontAwesome2' !important;
}

Затем вставьте/включите и отредактируйте определение шрифта:

@font-face {
  font-family: 'FontAwesome2';
  src: url('//host.domain/yourpath/fontawesome-webfont.eot?v=3.1.0');
  ...
  font-style: normal;
}

Ответ 2

ОБНОВЛЕНИЕ: "Решение" ниже на самом деле не работает... у нас действительно была опечатка, но в последующих тестах это все еще не было основной причиной, и мы по-прежнему сталкиваемся с этой проблемой.

Решение должно быть ОЧЕНЬ ОСТОРОЖНЫМ при переопределении шрифта @, чтобы обеспечить все те же форматы, что и в исходном шрифте @font-face. В противном случае браузер видит это как другое определение и будет пытаться загружать файлы, на которые ссылаются оба, а не переопределять его.

Итак, вот определение в FontAwesome CSS, на которое ссылаются в первую очередь.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), 
    url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), 
    url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}

И когда мы попытались переопределить, мы случайно сбросили определение формата ('svg'):

@font-face {
  font-family: 'FontAwesome';
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('//ourdomain.com/includes/font-awesome-3.1.x/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Как только мы добавили определение format('truetype'), мы больше не испытывали дополнительных хитов, которые привели к 404s.

Ответ 3

Если вы хотите сделать это в Razor HTML для одной страницы, вы можете сделать это следующим образом:

@section scripts{    
    <style type="text/css">
        @@font-face {
              font-family: 'Glyphicons Halflings';
              src: url('../fonts/glyphicons-halflings-regular.eot');
              src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype')
              , url('../fonts/glyphicons-halflings-regular.woff') format('woff')
              , url('../fonts/glyphicons-halflings-regular.ttf') format('truetype')
              , url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
            }  
    </style>

}