Использование другого шрифта с twitter bootstrap

Я хочу использовать другой шрифт для моего сайта, который не является обычным webfont. Я уже создал файлы EOT. Теперь, как я могу интегрировать эти шрифты с помощью twitter bootstrap? Может ли кто-нибудь помочь?Использование другого шрифта с twitter bootstrap

Благодаря

источник

2013-09-11 dxenaretionx

Я рекомендую попробовать снова использовать Google. Или поиск в верхней части этой страницы. Вы найдете множество результатов этого же предмета. Подсказка: «Пользовательский шрифт на веб-сайте». – mMoovs

Спасибо, я знаю, как использовать пользовательский шрифт на веб-сайте. Но это был не вопрос. Я спросил, как интегрироваться с twitter bootstrap. – dxenaretionx

Если вы уже знаете, как их использовать, я не понимаю, в чем проблема. Вы используете их с twitter bootstrap так же, как и использовать их на любом другом сайте. – mMoovs

вы можете настроить Twitter Bootstrap файл CSS, откройте bootstrap.css файл на текстовом редакторе и изменить семейство шрифтов с именем шрифта и сохранить его.

ИЛИ получил http://getbootstrap.com/customize/ и сделать настроенную Twitter Bootstrap

источник

2013-09-11 12:10:36

Большое спасибо за ваш ответ. Я видел, что я могу добавить другое имя шрифта в настройке страницы. Но как файлы будут включены? Или он будет автоматически получен от имени? Я пытаюсь использовать шрифты Proxima Nova. Можете ли вы быть более конкретными? – dxenaretionx

использовать свойство font-face source –

@ font-face { font-family: myFirstFont; src: url ('Sansation_Light.ttf'), url ('Sansation_Light.eot');/* IE9 */ } –

Вы можете найти настройщик на официальном сайте, который позволяет установить некоторые переменные LESS, а @font-family-base. Свяжите свои пользовательские шрифты в своем макете и используйте свой настраиваемый стиль начальной загрузки.

Link here

Для примера с @font-face правило, используя формат Уофф (который довольно хорошо для совместимости браузера), добавьте этот CSS в файле app.cssи включают в свой пользовательский файл boostrap.css.

@font-face { 
    font-family: 'Proxima Nova'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(link-to-proxima-nova-font.woff) format('woff'); 
}

Please note Proxima Nova is under a license.

источник

2013-09-11 12:12:03 zessx

Вам нужно будет добавить файлы шрифтов вручную. Этот генератор просто застраховал вас, чтобы не переопределить правила CSS. – zessx

Прежде всего, вы должны включить шрифт в свой веб-сайт (или ваш CSS, чтобы быть более точным) с использованием соответствующего @font-face правила.
Отныне существует несколько способов продолжения. Одна вещь, которую я хотел бы не сделать, это отредактировать bootstrap.css напрямую - так как как только вы получите более новую версию, ваши изменения будут потеряны. Тем не менее, у вас есть возможность настраивать ваши загрузочные файлы (на их сайте есть страница настройки). Просто введите имя шрифта со всеми резервными именами в соответствующее текстовое поле. Конечно, вам придется делать это каждый раз, когда вы получаете новую или обновленную версию своих загрузочных файлов.
Еще один шанс, который у вас есть, - перезаписать правила начальной загрузки в другой таблице стилей. Если вы это сделаете, вам просто нужно использовать селекторы, которые являются конкретными (или более конкретными, чем) селекторами начальной загрузки.
Примечание: если вам нужна поддержка браузера, может быть недостаточно одной версии EOT для вашего шрифта. См. http://caniuse.com/eot для таблицы поддержки.

источник

2013-09-11 12:23:39

Привет вы можете создать настраиваемую сборку на начальной загрузки, просто изменить название шрифта на следующих страницах

Bootstrap 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

Bootstrap 3 http://getbootstrap.com/customize/#less-variables

После этого, убедитесь, использовать правильную @ font-face в файле css и связать ее с вашей страницей. Или вы можете использовать генераторы шрифтовых наборов.

источник

2013-09-11 12:28:14

Самый простой способ, который я видел, - использовать Google Fonts.

Перейдите в раздел «Шрифты Google» и выберите шрифт, а затем Google предоставит вам ссылку для размещения вашего HTML-кода.

Google's link to your font

Затем добавьте в ваш custom.css:

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Your Font' !important; 
} 
p, div { 
    font-family: 'Your Font' !important; 
}

или

body { 
    font-family: 'Your Font' !important; 
}

источник

2014-02-28 20:31:26

Использование другого шрифта с twitter bootstrap

ответ

Смежные вопросы