Как изменить шрифт в блоге
С помощью стилей CSS можно задавать различный вид шрифта для шапки блога, заголовков и обычного текста. Так же, как и в обычном текстовом редакторе можно выбирать название шрифта, его размер, начертание и цвет.
CSS определяет следующие свойства шрифтов:
Семейство – font-family,
Начертание – font-style,
Вариант – font-variant,
Вес – font-weight,
Размер – font-size,
Шрифт – font.
Задание семейства шрифта font-family
Название для шрифта можно взять в WORD’е. Открываете список шрифтов, выбираете нужный, копируете его в буфер обмена и потом просто вставляете как значение для этого свойства.
Для большей свободы выбора в CSS предусмотрена возможность указывать несколько шрифтов.
При выборе шрифта придерживайтесь следующих рекомендаций:
1. Не выбирайте экзотические шрифты. Браузер посетителя вашего блога все равно может отображать только те шрифты, которые установлены у него на компьютере. И вместо какого-нибудь затейливого шрифта Jokerman, выдаст текст, отображенный Arial или Verdana.
2. Если название шрифта состоит из нескольких слов, например Times New Roman, то его обязательно нужно заключить в кавычки, иначе будут проигнорированы все свойства для данного элемента.
Например:
BODY { font-family: "new century schoolbook",verdana, sans-serif; }
В данном случае браузер сначала будет пытаться отобразить текст шрифтом new century schoolbook, если такого шрифта не окажется на компьютере, то браузер поищет шрифт verdana, а уж если и его нет, то текст отобразится любым доступным шрифтом без засечек. Задание начертания шрифта font-style Для этого свойства предусмотрены следующие значения: Нормальное начертание – normal, Курсив – italic, Наклонное начертание – oblique.
H1, H2, H3 { font-style: italic; }
Задание варианта шрифта font-variant
Значения свойства: normal или small-caps.
Это свойство позволяет выводить текст малыми прописными буквами, т.е., строчные буквы выглядят подобно заглавным, только меньше размером и с несколько иными пропорциями.
Значение ‘normal’ определяет шрифт без малых прописных букв, ’small-caps’ – с малыми прописными.
H3 { font-variant: small-caps; }
Задание веса (жирности) шрифта font-weight Наиболее часто встречающиеся значения: Нормальный – normal, Жирный – bold. Пример:
H1 { font-weight: bold; }
Хотя есть еще много значений для степени «жирности» букв, но не все шрифты можно так изменять, поэтому я не буду углубляться, чтобы не морочить вам мозги тем, что в принципе почти не используется.
Читайте дальше: Изменение размера шрифта в CSS
Облегчить жизнь поможет также химчистка на дому: легко и быстро вам приведут в порядок шубы и шапки, ковры и шторы. Все, что вы давно уже хотели отдать в химчистку, только не могли собраться и отвезти туда.
Марина,спасибо за пост. Давно хотела поменять шрифт в шапке блога.
я поменяла, но почему то такой же шрифт теперь присвоился и заголовкам постов.
можно ли это исправить?
я выделила название поста, посмотрла в средства разработкчика – этот элемент называется
в css вот такая запись есть
post-title h2{
font-size:21px;
color:#000;
margin-left:10px;
font-weight:normal;
padding-bottom:2px;
Мариша! Видимо, для нескольких типов заголовков устанавливается одинаковый шрифт. В шапке блога используется заголовок H1.
Для post-title h2 в стилях только указан только размер шрифта (font-size:21px;) и то, что он нормальный, т.е. не жирный (font-weight:normal;) и его цвет.
Просто, когда задают стили для заголовков, то часто перечисляют несколько штук разных заголовков чтобы у них были одинаковые стили. А для уточнения потом добавляют стили для отдельных видов заголовков, как в твоем примере.
Например, H1, H2, …
Посмотри, может в твоем шаблоне именно так и сделали.
Если ты хочешь изменить только шрифт для шапки блога, то можно попробовать сделать для него свои стили. Например так:
h1 { font-family: тут пишешь название шрифта;
font-size: размер;
и т.д.}
Марина, спасибо вам большое!
У меня получилось именно так, как я хотела: я задала др шрифт только для заголовка!
Вот и здорово! Молодец, Мариночка
Марина, не успела я порадоваться новому шрифту как тут облом
Пришла в гости к сесре, залезла через ее комп на свой блог-а там вместо нового шрифта старый…
видимо я выбралаэкзотический шрифт : Italic
А как же узнать какой не экзотический???
Мне надо такой красивый -типа курсива.
Подскажите пожалуйста какой-нибудь НЕ экзотический красивый шрифт для блога детских рецептов
Мариш, Italic – это не отдельный шрифт, это его стиль – курсив. Когда в Worde ты нажимаешь на кнопочку К и получаешь из обычного шрифта курсив.
Т.е. в данном случае виноват не Italic, а название шрифта.
Для детского сайта мне нравится шрифт Comic Sans MS – он есть на всех компах и он такой кругленький и слегка толстоватый, как и малыши, для которых ты пишешь рецепты
Я задал определенный шрифт в css, но я хочу что бы исключительно он отображался на веб странице у пользователя, а не стандартный Arial. Что делать в такой ситуации, если у пользователя на компьютере не окажется установленного шрифта в css, как принудительно загрузить его на компьютер ? !
Есть какие-то технологии, которые позволяют подгружать ваши шрифты при отображении сайта у пользователя. Но, насколько я знаю, они сильно тормозят загрузку сайта и поэтому пользователь может просто не дождаться и уйти от вас.
Поэтому лучше все-таки использовать стандартные шрифты.
Марина, здравствуйте.
Немного стыдно писать Вам, так как вижу, что вроде бы все, даже не слишком осведомленные в css люди, справляются с задачей замены шрифта. Только не я. Уже два дня бьюсь. Только начала стоить свой блог. Я просто не могу найти место, где я должна вставить указанные Вами изменения. А задача у меня следующая: изменить шрифт постов на Verdana и крупнее, нежели чем сейчас. Все, что не делала все бестолку – текст мелкий и посередине. Я даже залезла в файл style.css на хосте и задала права 777. Вот, где я вношу изменения:
body {background: #11253d url(images/back-body.jpg) repeat-x; font: 14 Verdana, Arial, Tahoma, sans-serif; color: #3d3d3d }
h1 {font-size:20px; color: #174986 }
h2 {font-size: 20px; color: #087db6; padding: 0 }
h3 {font-size: 20px; color: #055891 }
h4 {font-size: 20px; color: #666 }
h5 {font-size: 20px; color: #e26d27 }
h6 {font-size: 20px; color: #000 }
p {margin:5px 0 20px 0; line-height: 125% }
strong, b, caption, th {font-weight: bold }
blockquote {border-left:3px solid #e8e8e8; margin:10px 10px 0 10px; padding-left:8px }
acronym, abbr {border-bottom:1px dashed #333; cursor:help }
dd {margin-left:15px }
a:link {color: #097ab1; font-weight: normal; text-decoration: none }
a:visited {color: #086796;}
a:hover, a:active {color: #0b9be3; text-decoration: underline }
/* ***END GLOBAL***
Или здесь надо:
.post ul {margin-left:0; padding-left:30px }
div.page ul {margin-left:0; padding-left:30px }
div.page ul.children {padding: 0}
.customhtml ul {margin-left: 0; padding-left:30px }
.post ol {margin-left:0; padding-left:30px }
div.page ol {margin-left:0; padding-left:30px }
div.page ol.children {padding:0 }
.customhtml ol {margin-left:0; padding-left:30px }
Помогите разобраться.
Спасибо
Здравствуйте, Елена!
Попробуйте вставить в файл CSS такой кусок:
page.p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;}
В принципе, размер текста можете поставить любой, а не обязательно 14 пикселей
Не помогает
А посмотрите, может у вашей темы оформления блога не один файл CSS, а несколько. Так бывает и довольно часто, да еще эти файлы могут быть запрятаны в отдельную папку.
Спасибо, Марина. То что доктор прописал.
Марина, статья очень помогла! В первых абзацах не удалось сменить размер шрифта (был указан в %, ничего не получалось), но где-то в середине файла нашел, что нужно. Поэкспериментировал с размером – в результате увеличил с 12 до 16пт., а также увеличил заголовки статей.
Спасибо Вам!
Пожалуйста, Андрей