Файл: servises/font2.php
Строк: 295
<?
require'../shaxty.php'; // waphp.ru - закрытый клуб вап мастеров!
$align='left';
check_login();
$title='Все о шрифтах для веб-дизайна';
include_once (H.'shaxty/head.php');
echo '<br />';
echo 'Как видим 32 шрифта типа TrueType - это немало. Однако колонка с русским текстом во многих случаях не сильно отличается. На то есть причины. Такое происходит потому, что броузер подменяет их другими шрифтами, так как эти не содержат кириллического набора символов. Это шрифты предназначенные для других языков или символические (содержат специальные орнаменты). Как видно ниже, строка “Название шрифта” идентична, хотя каждой прописан разный шрифт.
<br/><br/>
<b>Шрифты предназначенные для определенных языков и не содержат кириллицы:</b>
<ol style="font-size: 11pt;">
<li style="font-family: Estrangelo Edessa;">Название шрифта: “Estrangelo Edessa” - Syriac</li>
<li style="font-family: Kartika;">Название шрифта: “Kartika” - Malayalam</li>
<li style="font-family: Gautami;">Название шрифта: “Gautami” - Telugu</li>
<li style="font-family: Latha;">Название шрифта: “Latha” - Tamil</li>
<li style="font-family: Mangal;">Название шрифта: “Mangal” - Devanagari</li>
<li style="font-family: MV Boli;">Название шрифта: “MV Boli” - Thaana</li>
<li style="font-family: Raavi;">Название шрифта: “Raavi” - Gurmukhi</li>
<li style="font-family: Shruti;">Название шрифта: “Shruti” - Gujarati</li>
<li style="font-family: Tunga;">Название шрифта: “Tunga” - Kannada</li>
<li style="font-family: Vrinda;">Название шрифта: “Vrinda” - Bengali</li>
</ol>
<b>Просто не содержат кириллицы:</b>
<ol style="font-size: 10pt;">
<li>Modern</li>
<li>Roman</li>
<li>Script</li>
</ol>
<b>Символические шрифты:</b>
<ol style="font-size: 10pt;">
<li>Symbol</li>
<li>Webdings</li>
<li>WingDings</li>
</ol>
Интересно отметить что в IE и Google Chrome отображаются символические ширифты такие как Symbol, Webdings и WingDings, ни OPERA ни FF ни Safari их не отображает. Но невелика потеря.
<br/><br/>
Чтож наш список кандидатов уменьшается на 16 шрифтов. Остается также 16.
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr align="center">
<td height="40" width="14">#</td>
<td width="130">Шрифт</td>
<td width="60">Семейство</td>
<td width="20">ОС</td>
<td>Кририлица</td>
<td>Латиница</td>
</tr>
<tr>
<td>1</td>
<td><strong>Arial</strong></td>
<td>sans-serif</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Arial;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Arial;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>2</td>
<td><strong>Arial Black</strong></td>
<td>sans-serif</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Arial Black;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Arial Black;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>3</td>
<td><strong>Comic Sans MS</strong></td>
<td>cursive</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Comic Sans MS;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Comic Sans MS;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>4</td>
<td><strong>Courier New</strong></td>
<td>monospace</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Courier New;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Courier New;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>5</td>
<td><strong>Franklin Gothic Medium</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: Franklin Gothic Medium;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Franklin Gothic Medium;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>6</td>
<td><strong>Georgia</strong></td>
<td>serif</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Georgia;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Georgia;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>7</td>
<td><strong>Impact</strong></td>
<td>sans-serif</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Impact;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Impact;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>8</td>
<td><strong>Lucida Console</strong></td>
<td>monospace</td>
<td>XP</td>
<td>
<div style="font-family: Lucida Console;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Lucida Console;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>9</td>
<td><strong>Lucida Sans Unicode</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: Lucida Sans Unicode;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Lucida Sans Unicode;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>10</td>
<td><strong>Microsoft Sans Serif</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: Microsoft Sans Serif;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Microsoft Sans Serif;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>11</td>
<td><strong>Palatino Linotype</strong></td>
<td>serif</td>
<td>XP</td>
<td>
<div style="font-family: Palatino Linotype;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Palatino Linotype;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>12</td>
<td><strong>Sylfaen</strong></td>
<td>serif</td>
<td>XP</td>
<td>
<div style="font-family: Sylfaen;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Sylfaen;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>13</td>
<td><strong>Tahoma</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: Tahoma;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Tahoma;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>14</td>
<td><strong>Times New Roman</strong></td>
<td>serif</td>
<td>XP</td>
<td>
<div style="font-family: Times New Roman;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Times New Roman;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>15</td>
<td><strong>Trebuchet MS</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: Trebuchet MS;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Trebuchet MS;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>16</td>
<td><strong>Verdana</strong></td>
<td>sans-serif</td>
<td>XP, Mac</td>
<td>
<div style="font-family: Verdana;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: Verdana;">Small text portion for example.</div>
</td>
</tr>
</tbody>
</table>
<br/>
Следует отметить еще два растровых шрифта, которые есть в стандартной поставке. Их особенность в том что они не масштабируются, а имеют фиксированные размеры: 8, 10, 12, 14, 18 и 24 Также они имеют проблемы с отображением в некоторых броузерах: Opera не показывает в них кириллицу, хотя показывает латиницу. А Safari и Google Chrome не показывают ни кириллицу не латиницу.
<br/><br/>
Нужно отметить, что под "непоказывает" имеется ввиду не показывает в нужном начертании. Браузер не найдя указанного шрифта или не умея его показывать заменяет его автоматически на шрифт со схожим начертанием.
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr align="center">
<td height="40" width="14">#</td>
<td width="130">Шрифт</td>
<td width="60">Семейство</td>
<td width="20">ОС</td>
<td>Кририлица</td>
<td>Латиница</td>
</tr>
<tr>
<td>1</td>
<td><strong>MS Sans Serif</strong></td>
<td>sans-serif</td>
<td>XP</td>
<td>
<div style="font-family: MS Sans Serif;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: MS Sans Serif;">Small text portion for example.</div>
</td>
</tr>
<tr>
<td>2</td>
<td><strong>MS Serif</strong></td>
<td>serif</td>
<td>XP</td>
<td>
<div style="font-family: MS Serif;">Короткий текст для примера.</div>
</td>
<td>
<div style="font-family: MS Serif;">Small text portion for example.</div>
</td>
</tr>
</tbody>
</table>
<br/>
Если вы не вкурсе, значения семейств:<br/>
<div style="font-size: 14px; font-family: serif;"><strong>serif</strong> Шрифт с засечками</div>
<div style="font-size: 14px; font-family: sans-serif;"><strong>sans-serif </strong> Без засечек</div>
<div style="font-size: 14px; font-family: cursive;"><strong>cursive</strong> курсив</div>
<div style="font-size: 14px; font-family: monospace;"><strong>monospace</strong> моноширный (каждая буква одинаковой ширины)</div>
<br/>
Еще существует такое семейство как "<span style="font-family: fantasy;"><strong>fantasy</strong></span>", но оно не входит в список web-safe шрифтов.<br/><br/>
Итак все, что мы имеем в голом Windows исключая ненадежные растровые шрифты, которые к тому же малоинтересны, это 16 шрифтов:<br/><br/>
9 без засечек,<br/>
4 с засечками,<br/>
2 моноширных,<br/>
1 курсивный.<br/><br/>
<span style="font-size: 14px;"><strong>
Book Antiqua</strong></span> - распространенный шрифт, но не входит список дефолтных шрифтов. Ставится с MS Office. Очень похож на <span style="font-size: 14px;"><strong>Palatino Linotype</strong></span>.
<br/><br/>
Но существует не только OS Windows, есть еще Mac OS. И если мы хотим чтобы наш шрифт увидели также пользователи этой OS, при написании названия шрифта в стилях для текста на сайте нужно добавить соответствующе название его в Mac OS. Эти названия иногда совпадают, но для некоторых отличаются.Ниже привожу список доступных для обеих OS шрифтов в написании для CSS
<br/><br/>
<b>Список доступных для Windows и Mac OS шрифтов в написании для CSS</b>
<br/>
<blockquote>
<div style="padding: 2px;">font-family: Arial, Helvetica, sans-serif</div>
<div style="padding: 2px;">font-family: “Arial Black”, Gadget, sans-serif</div>
<div style="padding: 2px;">font-family: “Comic Sans MS”, cursive</div>
<div style="padding: 2px;">font-family: “Courier New”, Courier, monospace</div>
<div style="padding: 2px;">font-family: Georgia, serif</div>
<div style="padding: 2px;">font-family: Impact, Charcoal, sans-serif</div>
<div style="padding: 2px;">font-family: “Lucida Console”, Monaco, monospace</div>
<div style="padding: 2px;">font-family: “Lucida Sans Unicode”, Lucida Grande, sans-serif</div>
<div style="padding: 2px;">font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif</div>
<div style="padding: 2px;">font-family: Tahoma, Geneva, sans-serif</div>
<div style="padding: 2px;">font-family: “Times New Roman”, Times, serif</div>
<div style="padding: 2px;">font-family: “Trebuchet MS”, Helvetica, sans-serif</div>
<div style="padding: 2px;">font-family: Verdana, Geneva, sans-serif</div>
</blockquote>
<strong>И растровые:</strong><br/>
<blockquote>
<div style="padding: 2px;">font-family: “MS Sans Serif”, Geneva, sans-serif</div>
<div style="padding: 2px;">font-family: “MS Serif”, “New York”, serif</div>
</blockquote>
<br/>
Итак, не считая растровых, имеем 13 шрифтов. Я не нашел соответствующих в Mac OS для
Franklin Gothic Medium, Sylfaen и Microsoft Sans Serif.<br />';
echo '<br />';
echo $div1.'<a href="/servises/">Сервисы</a>'.$div9;
include_once (H.'shaxty/foot.php');
?>