Используя @fontface, как применить разные стили к разным семействам шрифтов? - PullRequest
Новая
       14

Используя @fontface, как применить разные стили к разным семействам шрифтов?

4 голосов
/ 11 февраля 2012

У меня проблемы с некоторыми CSS. В настоящее время я использую @fontface, который работает отлично и денди. Однако для тех времен, когда это не так, я добавил другие шрифты для чтения, но я бы хотел по-разному их стилизовать. Например, если отображается Rockwell, я бы хотел, чтобы вес шрифта был установлен жирным шрифтом. Но не если это Times New Roman. Кроме того, я хотел бы только "межбуквенный интервал: -4px;" применять, если отображается Times New Roman.

Это вообще возможно? И если да, пожалуйста, помогите с кодом. 

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }

Ответы [ 3 ]

1 голос
/ 23 февраля 2012

Вы ясно выразились, не волнуйтесь.

Я не думаю, что существует прямое решение, однако в некоторых случаях вы можете использовать этот обходной путь.

  1. Вставить шрифт.
  2. Определите, если вам это удастся (http://www.lalit.org/lab/javascript-css-font-detect/)
  3. Если да / нет добавить к атрибуту <html> class="fontName".
  4. В CSS добавьте специальные объявления, такие как .fontName body { font-weight:bold; } - будьте готовы, это требует много работы. Особенно с жирным шрифтом - имейте в виду, как будет выглядеть <strong>.
  5. Удачи;)

Как и у каждого обходного пути, у него есть некоторые проблемы - такие как доступность JS и так далее. Может быть, это будет работать для вас.

0 голосов
/ 23 февраля 2012

Используйте два класса, по одному для каждого шрифта 

.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }

Затем в вашем HTML используйте их как 

<h1 class="font1">...</h1>
<div class="font2">...</div>
0 голосов
/ 13 февраля 2012

То, что вы пытаетесь сделать, определенно возможно.Чтобы ваш скрипт работал так, как вы его написали.Вам необходимо выполнить следующие шаги:

  1. Загрузить шрифт в свой каталог CSS (если именно там вы хотите разместить шрифт).(Вы не можете просто вызвать шрифт ChunkFive без загрузки шрифта в каталог, в котором находится ваш CSS на основе вашего кода) *

  2. Укажите @ font-face над всеми вашими другими стилями CSS, которые вы планируетена использование шрифта.

     @font-face { 
     font-family: "ChunkFive"; 
     src: url('chunkfive.ttf');   // Or whatever the font name is
 }

После того, как вы выполнили шаги 1 и 2, вы можете назвать свой шрифт так, как вы указали выше: 

h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}

Для более точного руководства по шрифтуи CSS3 шрифты Предлагаю прочитать этот очень подробный и информативный пост в блоге:

http://webdesignerwall.com/general/font-face-solutions-suggestions

Приветствия и удачи

...