Googlefonts: изменение шрифта только для одного символа на сайте

Чаз ДезимоунЯ не знаю, как это произошло, но каждый экземпляр амперсанда на моем веб-сайте написан одним определенным шрифтом и стилем (что-то вроде курсива Times Roman). Мой сайт посвящен амперсандам, так что это наиболее уместно. Но я понятия не имею, как все амперсанды были заменены одним шрифтом и стилем. Я использую пару шрифтов Google для большей части текста, но амперсанд относится к одному конкретному шрифту, где бы он ни появлялся.

Вы увидите его на http://amperart.com

Несколько месяцев назад он внезапно появился в виде причудливого фигурного амперсанда (как Garamond Italic) повсюду на сайте, что было действительно круто, поэтому я просто оставил его — «если это не сломано, не чините это» — но теперь это просто римский наклонный амперсанд. Я хотел бы получить другой обратно, так как вычурность уместна. Конечно, мне также просто любопытно, как всего один символ может быть изменен на определенный шрифт и стиль на всем веб-сайте. (Размер подстраивается под размер окружающего шрифта.)

Действительно озадачен этим. Искал везде. Вы, люди, самые великие. (Я типограф со времен пиинга — «рассыпания» для детей, которые никогда не слышали этого термина — ручная печать по всему цеху, но когда она появляется на веб-сайте, я теряюсь.)

Спасибо и еще раз спасибо.

Скорее всего, это не связано, но ваш HTML, кажется, имеет некоторые недостатки: validator.w3.org/nu/?doc=http%3A%2F%2Famperart.com%2F

Ответы (2)

Эта часть вашего кода...

.amp {
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1em;
}

Управляйте амперсандами... Наблюдайте за изменением амперсандов, когда я включаю и выключаю этот CSS....

введите описание изображения здесь

Если вы хотите изменить их шрифт, измените это свойство CSS. Поскольку ни один из шрифтов, указанных в CSS, не является «безопасным» кроссплатформенным шрифтом или веб-шрифтом, они полностью зависят от того, какие шрифты пользователь активировал в своей системе.

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

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

С этим не поспоришь!

Скотт объяснил «почему»; это потому, что вы используете шрифты, которые есть не у каждого пользователя на компьютере. Вы не только заметили разницу, но, вероятно, заметили бы большую разницу, если бы попробовали несколько разных платформ.

Вот как это выглядит для меня:

Ваш текст в Джорджии , и амперсанд использует Баскервиль (для меня), но мог бы использовать «Goudy Old Style», «Palatino», «Book Antiqua», «Warnock Pro»!

пример

Это легко исправить, у вас даже есть класс css только для амперсанда; вам нужно будет изменить его в таблице стилей только один раз, и он будет обновляться везде.

Если вы хотите, чтобы он всегда отображался одинаково для всех, вы можете изменить свой класс css «.amp» на веб -шрифт , который вам нравится. ИЛИ просто удалите указанные шрифты для этого .amp, если вы хотите, чтобы он использовался так же, как остальная часть тела или ваш шрифт сайта по умолчанию.

предложения гугл шрифтов

Что вам нужно использовать:

Даже если вы использовали шрифт Google, вам все равно нужно указать свой сайт, где он его найдет. В противном случае шрифт не будет работать. Не рекомендуется использовать много веб-шрифтов. Я не знаю, каковы другие стандарты, но использование 2-3 должно быть в порядке.

установить гугл шрифты

Даже если вы используете « безопасный шрифт », они тоже имеют некоторую разницу между собой, а некоторые из них предназначены только для Mac или ПК. Если у пользователя нет ни одного из предложенных вами шрифтов, будет использоваться «шрифт по умолчанию без засечек», и это может быть, например, Tahoma или Geneva или «без засечек» (например, может даже закончиться с помощью arial); у вас не будет контроля над тем, какой из них. Убедитесь, что эквивалент добавлен в ваш css.

Поскольку вы типограф, вы можете контролировать этот аспект!

PS: Это ВАША голова на изображении с амперсандом? Лучшая "био" картина!

Googlefonts: изменение шрифта только для одного символа на сайте
СпросиСетьПолитика конфиденциальности1y, 0v