Как использовать загруженное изображение или шрифт (zip-файл) в CSS

Question

Вопрос новичка: я знаю, как использовать онлайн-изображение - скопируйте пасту в URL, но не знаю, как она работает, если загружена.Я скачал шрифт в виде zip-файла, но я не знаю, что добавить в URL, тот же вопрос для изображения.Спасибо.

Answer 1

Изображения на вашем сайте

Как говорит Эндрю, чтобы использовать изображения на вашем сайте, изображения должны быть в любом месте в Интернете.

Выможете использовать Amazon S3 для хранения изображений вашего сайта.https://aws.amazon.com/s3/.

Получив URL-адрес изображения в Интернете, вы можете использовать его в своем html, просто вставив его в атрибут src тега img.

<img src="url/of/the/image">

Пользовательские шрифтына вашем веб-сайте

Теперь, если вы хотите использовать собственный шрифт для своего веб-сайта, вставьте файлы шрифтов в папку своего веб-сайта и создайте правило css3, как показано ниже:

@font-face {
    font-family: myfont;
    src: url(route/to/your/font/my_font.woff);
}

Тогда, если вы хотите использовать шрифт, например, для всех тегов h2:

h2 {
    font-family: myfont;
}

Надеюсь, это поможет вам.

Answer 2

Будучи новичком, я объясню вам все шаг за шагом.

Вначале вы должны разархивировать сжатый файл sansationlight.zip

Щелкните правой кнопкой мыши на sansationlight.zip , затем нажмите Извлечь файлы

Вы получитеследующее окно

Нажмите OK

Вы получите sansationlight папка

Создайте папку рядом с файлом index.html и назовите ее Шрифты

Скопируйте папку sansationlight , которую вы распакуете в папку Fonts

Копировать

Вставить в папку Fonts

Добавьте следующий код стиля к тегу стиля во входном файле.Файл dex.html:

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

}

div{
    font-family: 'SansationLight';
}

Здесь вы увидите, как код будет отображаться на вашей HTML-странице:

Результат:

Вот шрифт перед добавлением кода стиля:

Если вы хотите использовать внешний файл стиля, выполните следующие действия:

После копирования папки sansationlight в папку Fonts , создайте еще одну папку, затемв папку Fonts , назовите ее таблицы стилей

Внутри таблиц стилей папку, создайте файл style.css и откройте его.

Скопируйте следующий код в файл style.css:

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

}

.mydiv{


font-family: 'SansationLight';
}

Обратите внимание, ядобавили ../ на один шаг назад из папки таблиц стилей

Здесь вы видите, как будет выглядеть код в вашем файле style.css:

Чтобы связать файл style.css соith index.html, используйте тег link в index.html:

<link rel="stylesheet" type="text/css" href="stylesheets/style.css">

Так будет выглядеть код в файле index.html:

Примечание Первым способом я сделал стиль шрифта для всех элементов div div{ }

Вторым способом был использован класс .mydiv

Для добавления изображений:

Создайте папку рядом с файлом index.html и назовите ее images

Добавьте изображение, которое вы хотите использовать, в папку images

Используйте тег <img> для добавления изображения

<img src="images/image.jpg" style="width: 50%; height: 50%">

Результат:

Полезные ссылки:

Учебник HTML

Учебник CSS

HTML, CSS и другие

Учебное пособие по видео HTML5

Учебное пособие по CSS3

Изображение, которое я использовал

Answer 3

Хорошо, похоже, вы пытаетесь добавить изображения на сайт.Ваши изображения должны быть размещены где-то для использования на веб-сайте.

Когда вы используете URL-адрес того, который уже есть в Интернете, это изображение размещается кем-то другим.

Если выВы загрузили его, вам нужно будет добавить его в свой веб-проект, а это значит, что вы будете размещать его самостоятельно.Затем он будет использовать URL для ссылки на изображение и отображать его, но этот URL будет находиться в вашем собственном домене.

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