Начертание шрифта, похоже, не работает

ProgramBox

Начертание шрифта, похоже, не работает

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#html #css #fonts #webfonts #truetype

#HTML #css #шрифты #веб-шрифты #truetype

Вопрос:

я скачал Bebas Neue.ttf и загрузил в свою папку с шрифтами через ftp. Затем я добавил следующий код в свой css-файл

 @font-face {
font-family: "bebas";
src: url(fonts/Bebas Neue.ttf) format("truetype");
}

и чтобы применить его к заголовку моего заголовка, я добавил следующий код в свой css

   .plain_text .big_title {
font-family: bebas;
font-size: 33px;
font-weight: bold!important;
}

вы можете увидеть плитку с надписью «ДОБРО пожаловать В НАШУ КОМПАНИЮ» через thi slink — МОЙ САЙТ.

Я не знаю, что я сделал не так. Пожалуйста, помогите!! Спасибо

Ответ №1:

Для web используется не только формат ttf, но также вам нужны eot, woff и svg.

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

И для его использования тоже есть демо-версия.

Итак, теперь вы можете использовать вот так:

 @font-face {
    font-family: 'bebas';
    src: url('fonts/bebas.eot?') format('eot'), 
         url('fonts/bebas.woff') format('woff'), 
         url('fonts/bebas.ttf')  format('truetype'),
         url('fonts/bebas.svg#bebas') format('svg');
}

Получайте удовольствие!

1. есть ли онлайн-инструмент для преобразования шрифта в формат SVG?

2. Я ссылался в ответе, проверьте это. Это приятно.

3. о, просто посмотрите ссылку, это действительно хороший онлайн-инструмент. вы заслуживаете 1 за предоставление ссылки 🙂

4.@Melvin внимательно проверьте, также требуется только определенный вами тип шрифта ttf eot woff формат

5. @C-link можете ли вы также опубликовать, что тип MIME также необходимо определить на сервере, много раз я предоставляю ответ для определения типа MIME, а также при использовании пользовательских шрифтов. Многие пользователи SO сталкивались с проблемой; всегда жалуются, что пользовательский шрифт не отображается в браузере.

Ответ №2:

Для выполнения задачи вам нужны все форматы шрифта, т. е. EOT, WOFF и TTF, и, во-вторых, постарайтесь не оставлять пробелов между именем шрифта «BebasNeue.ttf» вместо «Bebas Neue.ttf», а URL-адрес должен быть между кавычками «или «

 src: url(fonts/Bebas Neue.ttf)

затем примените этот код

 @font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

1. Я не думаю, что здесь нужно публиковать какой-либо дополнительный ответ. Поскольку опубликованный ответ завершен сам по себе и выдает весь ответ, опубликованный OP.

2. Да, вы правы @KheemaPandey Я увидел это позже после публикации ответа. но в нем есть по крайней мере 2 новые вещи, для которых не используется пробел и кавычки

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

4. @C-link Это действительно потрясающе, и за него проголосовали.. для меня это было ново. но я сказал ранее, что я увидел это позже после публикации ответа.

5. @MohitShrivastava все в порядке.

Ответ №3:

У меня была такая же проблема, но я решил ее, удалив строку format (…) в конце строки. Будьте как можно проще.

 @font-face {
  font-family: 'bebasneue';
  src: url(../fonts/bebasneue/bebasneue.woff);
}

Ответ №4:

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

 src: url("fonts/Bebas Neue.ttf") format("truetype");

Вы можете ознакомиться с более подробной информацией здесь http://www.w3.org/TR/css3-fonts/#font-reference-the-src-descriptor

1. в чем разница между одинарными и двойными кавычками здесь?

2. Операционная система не использовала ни того, ни другого, поэтому я ответил в theb. И часто считается, что в случае сомнений лучше использовать двойные кавычки, когда вы хотите иметь дело с пробелами. Даже в Windows и Linux, насколько мне известно, использование двойных кавычек решает проблему наличия пробелов между именами при переходе к папке.