Arhn - архитектура программирования

Правило @font-face не работает в codepen

Я воссоздаю страницу регистрации электронной почты для моего курса кодирования. Вот пример того, что я должен воссоздать: Модель страницы регистрации по электронной почте

Чтобы этот проект выглядел как можно ближе к примеру, я пытался использовать правило @font-face со шрифтом Wisdom, чтобы заголовки с тегами имели шрифт мудрости. Мой курс предлагает использовать Mozilla Developer Docs, чтобы заставить Wisdom Font работать. Я использую страницу Mozilla Developer Docs @font-face. в помощь мне и моему курсу программирования был предоставлен шрифт Wisdom в zip-файлах. Я скачал файл и извлек все содержимое. Как только я загрузил файл, я следовал синтаксису Mozilla Docs. Однако шрифт изменился с Comic Sans на Arial. Я снова загрузил файл шрифта Wisdom и поэкспериментировал с синтаксисом и изменением URL-адреса src, чтобы посмотреть, поможет ли это. Однако шрифт по-прежнему остается на Arial. Я написал своему учителю по электронной почте о проблеме, и она прислала мне еще одну ссылку. Мой по ссылке учителя есть генератор комплекта @font-face, и я использовал его, чтобы получить форматы файлов на своем компьютере. После того, как я использовал комплект, я следовал синтаксису примера как для базовой, так и для перекрестной совместимости. Однако шрифт остается прежним.

Прямо сейчас мой код для @font-face на моем сайте выглядит так:

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

Вот мой код регистрации по электронной почте, который показывает, как он выглядит. Я использую неправильный URL-адрес src для своего кода? Какие-нибудь советы?


Ответы:


1

Проблема №1: в ваших URL-адресах не должно быть пробелов.

src: url('fonts/wisdom_script-webfont.eot');

Проблема № 2. Как и img src, URL-адрес вашего веб-шрифта должен указывать на реальный ресурс, размещенный где-то в Интернете. Прямо сейчас он указывает на папку fonts, которой, как я полагаю, не существует в домене CodePen. Если у вас есть учетная запись CodePen Pro, вы можете загрузить файлы шрифтов через область Ресурсы (https://blog.codepen.io/documentation/pro-features/asset-hosting/); в противном случае вам нужно будет разместить файлы шрифтов в Интернете где-нибудь еще и указать на этот URL-адрес.

Проблема № 3: Ваш font-family должен ссылаться на имя шрифта без папки/URL, например:

 font-family: 'WisdomScriptAIRegular';

Это то же самое имя, которое вы должны использовать позже в своем CSS для использования шрифта, например:

.recent_posts{
   font-family: 'WisdomScriptAIRegular', Arial, sans-serif;
}
18.03.2016
  • Где я могу разместить файлы шрифтов в Интернете, чтобы иметь к ним доступ CodePen? Я исправил пробелы в URL-адресах. 21.03.2016
  • Привет, Сара. Если у вас есть учетная запись CodePen Pro, ссылка для загрузки ресурсов должна быть здесь: i.imgur.com/lJ6YRzX. jpg В противном случае вам придется самостоятельно размещать их на веб-сервере. 21.03.2016
  • Другим вариантом может быть использование аналогичного веб-шрифта Google: google.com/fonts#ReviewPlace:refine/ 21.03.2016
  • Я понял. Оказывается, я использовал src дважды. Спасибо за вашу помощь! 31.03.2016
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..