|
Внедрение на сайт своего(нестандартного) ШРИФТа
|
|
|
| Дата: Вторник, 22.10.2013, 13:29 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| 1. 100% рабочий метод
<link href='http://fonts.googleapis.com/css?family=google+font&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
где, google_font - шрифт из набора шрифтов гугл http://www.google.com/fonts/
<p style="font-family:'google font';">Здесь текст</p>
2. Метод на перспективу
Пишем в <style>...
@font-face {
font-family: 'Futuris';
src: url('futurisb.eot'); //для IE
src: local('Futuris Bold'),
url('futurisb.woff') format('woff'); //для остальных браузеров
}
закачав на сайт нужный шрифт в формате .eot и .woff
Для этого надо сконвертировать шрифт .ttf(true type)
Бесплатный конвертов шрифтов онлайн: http://www.font2web.com/
|
| |
| |
|
| Дата: Вторник, 28.01.2014, 11:50 | Сообщение # 2 |
|
Группа: Администраторы
Сообщений: 1530
| Шрифт векторных значков(стрелки, поиск, меню, телефон) для навигации сайта
скачать http://fortawesome.github.io/Font-Awesome/
скачать у нас http://kachay.ucoz.org/css/icon_css.zip
Описание внедрения Font-Awesome по-русски http://fontawesome.veliovgroup.com/
Внедрение шрифта иконок в двух словах:
1. Вставить тег <link href="http://kachay.ucoz.org/css/font-awesome.css" rel="stylesheet"> в <header>
2. В то место, где хотим видеть иконку пишем: <i class="icon-globe icon-2x"></i>
где "icon-globe" - имя иконки, "icon-2x" - масштаб(2,3,4), если надо
Внедрение шрифта после(:after) текста
a.ext:after {
font-family: FontAwesome !important;
content: "\f08e";
margin-left:4px;
vertical-align: -1px;
display: inline-block;
}
-------------------------------------
Теги: шрифт, значки, font
Еще версия Awesome <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
| |
| |
|
|
|
| Дата: Четверг, 02.10.2014, 23:14 | Сообщение # 4 |
|
Группа: Администраторы
Сообщений: 1530
| Вставка на сайт шрифта Cuprum / шрифт для кириллицы похожий на Oswald
<link rel="stylesheet" href="http://kachay.ucoz.org/css/cuprum.css" type="text/css" charset="utf-8" />
<p style="font-family:Conv_Cuprum;font-size:16px;">Текст здесь</p>
|
| |
| |
|
|
|
| Дата: Пятница, 09.01.2015, 22:33 | Сообщение # 6 |
|
Группа: Администраторы
Сообщений: 1530
| pfs-bold
@font-face {
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf');
font-family: pfs-bold;
}
Пример и источник: http://codepen.io/suez/pen/vEgZba
|
| |
| |
|
| Дата: Суббота, 18.07.2015, 12:39 | Сообщение # 7 |
|
Группа: Администраторы
Сообщений: 1530
| Как не напрягаясь вставить хороший шрифт на сайт
на примере шрифта "open-sans"
Шрифт "open-sans" не является стандартным, но вид у него привлекательный,
чтобы использовать этот шрифт не инсталлируя его на компьютер в современных браузерах достаточно лишь добавить строку
1й способ в <style>: @import url(http://allfont.ru/allfont.css?fonts=open-sans);
2й способ в <head>: <link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />
и далее указывать шрифт у нужных элементов
p {font-family: 'open-sans',arial;}
Поищите и другие шрифты на сайте allfont.ru
Пример для редактирования: http://codepen.io/anikey99/pen/JdBLMJ
|
| |
| |
|
| Дата: Понедельник, 03.08.2015, 23:30 | Сообщение # 8 |
|
Группа: Администраторы
Сообщений: 1530
| https://materialdesignicons.com/
Множество легко встраиваемых значков от этого сервиса.
Хорош тем, достаточно поставить скрипт этого сайта
//cdn.materialdesignicons.com/1.1.70/css/materialdesignicons.min.css
и прописать в нужном месте:
<i class="mdi mdi-имя_значка"></i>
что очень здорово - есть svg вариант каждого значка
<svg style="width:40px;height:40px" viewBox="0 0 24 24">
<path fill="#000000" d="M18,4V3A1,1 0 0,0 17,2H5A1,1 0 0,0 4,3V7A1,1 0 0,0 5,8H17A1,1 0 0,0 18,7V6H19V10H9V21A1,1 0 0,0 10,22H12A1,1 0 0,0 13,21V12H21V4H18Z" /></svg>
Пример: http://codepen.io/anikey99/pen/KpbEPq
|
| |
| |
|
|
|
| Дата: Воскресенье, 11.10.2015, 23:52 | Сообщение # 10 |
|
Группа: Администраторы
Сообщений: 1530
| Внедрение экзотических шрифтов от google /handwriting,Arvo
<head>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load ( { google: {
families: ['Arvo|Pacifico']
} } );
</script>
</head>
Пример: http://codepen.io/Indiessance/pen/NGgXQE
https://www.google.com/fonts/
|
| |
| |
Играйте бесплатно в 
