Правильное отображение шрифтов у сайта на bootstarp 3

@toxin · Регистрация: 19.03.2012

Студворк — интернет-сервис помощи студентам

Пробую работать с bootstarp 3, при отображении сайта с компьютера получаю ожидаемый внешний вид сайта, но если грузить страничку с телефона то текст отображается не теми шрифтами, какими хотелось бы (как я понял на телефоне просто нет нужных шрифтов).
Подскажите как исправить ситуацию?

@newJS · 05.03.2016, 08:06

посмотри архив, может поможет, или всю книгу поищи
Странность с кодировками в ff

@toxin · 05.03.2016, 13:00 **[ТС]**

Странный совет, очень дюже странный. Конечно спасибо за отклик, но полезного в том, что ты кинул 0

+ во всех файлах крокозябры

@Fedor92 · 05.03.2016, 14:27

toxin, по подробней опишите какие шрифты используете, какие именно не отображаются на мобильных устройствах, кастомные(нестандартные) или нет, допустима ли на моб. устройствах замена шрифтов или всё-таки кровь из носа хотите сделать визуализацию десктопных шрифтов? И конечно хотелось бы взглянуть на код...

@toxin · 05.03.2016, 15:00 **[ТС]**

Шрифты Helvetica и Helvetica Neue. Код это пока простой hello world c использованием bootstarp.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
 
</body>
</html>

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

@alex925 · 05.03.2016, 15:03

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/*
 Подключение шрифта Helvetica
*/
@font-face {
    font-family: Helvetica; /* имя шрифта для CSS правил */
    font-weight: 300;
    font-style: normal;
    src: url(../fonts/Helvetica/Helvetica-Light.ttf);
}
 
@font-face {
    font-family: Helvetica;
    font-weight: 300;
    font-style: oblique;
    src: url(../fonts/Helvetica/Helvetica-LightOblique.ttf);
}
 
@font-face {
    font-family: Helvetica;
    font-weight: 400;
    font-style: normal;
    src: url(../fonts/Helvetica/Helvetica.ttf);
}
 
@font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: normal;
    src: url(../fonts/Helvetica/Helvetica-Bold.ttf);
}
 
@font-face {
    font-family: Helvetica;
    font-weight: 700;
    font-style: oblique;
    src: url(../fonts/Helvetica/Helvetica-BoldOblique.ttf);
}
 
@font-face {
    font-family: Helvetica;
    font-weight: 400;
    font-style: oblique;
    src: url(../fonts/Helvetica/Helvetica-Oblique.ttf);
}
 
 
/*
 Подключение шрифта Helvetica Neue
*/
 
@font-face {
    font-family: Helvetica Neue;
    font-weight: 400;
    font-style: normal;
    src: url(../fonts/HelveticaNeue/HelveticaNeue.ttf);
}
 
@font-face {
    font-family: Helvetica Neue;
    font-weight: 500;
    font-style: normal;
    src: url(../fonts/HelveticaNeue/HelveticaNeue-Medium.ttf);
}
 
@font-face {
    font-family: Helvetica Neue; 
    font-weight: 100;
    font-style: normal;
    src: url(../fonts/HelveticaNeue/HelveticaNeue-Thin.ttf);
}

Если вдруг кому нужны сами шрифты, то вот

@toxin · 05.03.2016, 15:05 **[ТС]**

alex925, спасибо Вам огромное, это помогло)

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@toxin 202 / 44 / 2 Регистрация: 19.03.2012 Сообщений: 283

	Правильное отображение шрифтов у сайта на bootstarp 3 05.03.2016, 03:42. Показов 1990. Ответов 6 Метки нет (Все метки) Пробую работать с bootstarp 3, при отображении сайта с компьютера получаю ожидаемый внешний вид сайта, но если грузить страничку с телефона то текст отображается не теми шрифтами, какими хотелось бы (как я понял на телефоне просто нет нужных шрифтов). Подскажите как исправить ситуацию? 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	05.03.2016, 08:06
	посмотри архив, может поможет, или всю книгу поищи Странность с кодировками в ff 0

@toxin 202 / 44 / 2 Регистрация: 19.03.2012 Сообщений: 283
	05.03.2016, 13:00 [ТС]
	Странный совет, очень дюже странный. Конечно спасибо за отклик, но полезного в том, что ты кинул 0 + во всех файлах крокозябры 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	05.03.2016, 14:27
	toxin, по подробней опишите какие шрифты используете, какие именно не отображаются на мобильных устройствах, кастомные(нестандартные) или нет, допустима ли на моб. устройствах замена шрифтов или всё-таки кровь из носа хотите сделать визуализацию десктопных шрифтов? И конечно хотелось бы взглянуть на код... 0

@toxin 202 / 44 / 2 Регистрация: 19.03.2012 Сообщений: 283
	05.03.2016, 15:05 [ТС]
	alex925, спасибо Вам огромное, это помогло) 0

Правильное отображение шрифтов у сайта на bootstarp 3

Решение