kapushoniha

font-weight влияет на работу тега A

Recommended Posts

Добрый день!

Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело.

Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать.

 

Для начертаний bold и 300 все ок.

Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ?

Шрифт подключаю так:

<style>
  @font-face {
      font-family: 'Gotham';
      src: url("{{asset 'Gotham-Medium.eot'}}");
      src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'),
          url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'),
          url("{{asset 'Gotham-Medium.woff'}}") format('woff'),
          url("{{asset 'Gotham-Medium.ttf'}}") format('truetype');
      font-weight: 500;
      font-style: normal;
  }
  @font-face {
      font-family: 'Gotham';
      src: url("{{asset 'Gotham-Bold.eot'}}");
      src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'),
          url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'),
          url("{{asset 'Gotham-Bold.woff'}}") format('woff'),
          url("{{asset 'Gotham-Bold.ttf'}}") format('truetype');
      font-weight: bold;
      font-style: normal;
  }
  @font-face {
      font-family: 'Gotham';
      src: url("{{asset 'Gotham-Light.eot'}}");
      src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'),
          url("{{asset 'Gotham-Light.woff2'}}") format('woff2'),
          url("{{asset 'Gotham-Light.woff'}}") format('woff'),
          url("{{asset 'Gotham-Light.ttf'}}") format('truetype');
      font-weight: 300;
      font-style: normal;
  }
</style>

 

Заранее спасибо!

 

 

Снимок экрана 2019-09-17 в 12.41.54.png

Edited by kapushoniha

Share this post


Link to post
Share on other sites

Жуть жуткая. 

Раз уж хотите исправить проблему, начните с ликвидации span (зачем он там?) Он может перебивать вашу жирность.
А strong оберните текст в ссылке, а не ссылку. 

Share this post


Link to post
Share on other sites
4 минуты назад, npofopr сказал:

Жуть жуткая. 

Раз уж хотите исправить проблему, начните с ликвидации span (зачем он там?) Он может перебивать вашу жирность.
А strong оберните текст в ссылке, а не ссылку. 

Да, но проблема в том, что это в редакторе, с которым работают клиенты на сайте, прописываются такое, а его поменять не удастся. Надо как-то пропатчить со своей стороны.

Share this post


Link to post
Share on other sites
26 минут назад, kapushoniha сказал:

Да, но проблема в том, что это в редакторе, с которым работают клиенты на сайте, прописываются такое, а его поменять не удастся. Надо как-то пропатчить со своей стороны.

Надо найти в коде редактора строку, где он добавляет span и пофиксить её.

Share this post


Link to post
Share on other sites
3 минуты назад, rasmus сказал:

Надо найти в коде редактора строку, где он добавляет span и пофиксить её.

Там впроблема все же не в span и strong, а именно в font-weight: 500 - это начертание ломает любую ссылку.

Share this post


Link to post
Share on other sites
3 минуты назад, kapushoniha сказал:

Там впроблема все же не в span и strong, а именно в font-weight: 500 - это начертание ломает любую ссылку.

Попробуй применить font-weight не к strong а к a, а strong совсем убери

Share this post


Link to post
Share on other sites
4 минуты назад, rasmus сказал:

Попробуй применить font-weight не к strong а к a, а strong совсем убери

Да, уже попробовала, но проблема все равно остается.

Share this post


Link to post
Share on other sites
1 час назад, kapushoniha сказал:

Да, уже попробовала, но проблема все равно остается.

Повторюсь. В приведенном вами коде все прекрасно работает. Проблема в другом месте. Покажите проблемный код

Share this post


Link to post
Share on other sites
22 минуты назад, npofopr сказал:

Надо или живой пример или кофейную гущу разводить. 

Вот живой пример

https://stmaryscollege-demo.zendesk.com/hc/en-us/articles/360009355359-HOW-TO-PRINT-AT-SMC-FROM-YOUR-OWN-DEVICE

Не работают ссылки с текстом 'this link', 'Windows', 'Mac' и другие. Все font-weight: 500, пробовала ставить и на сам тег А. Если сделать bold, то они оживают.

Я уже склоняюсь к тому что это версия шрифта какая-то битая.

Спасибо за участие!

4 минуты назад, AlexZaw сказал:

Повторюсь. В приведенном вами коде все прекрасно работает. Проблема в другом месте. Покажите проблемный код

Вот живой пример

https://stmaryscollege-demo.zendesk.com/hc/en-us/articles/360009355359-HOW-TO-PRINT-AT-SMC-FROM-YOUR-OWN-DEVICE

Не работают ссылки с текстом 'this link', 'Windows', 'Mac' и другие. Все font-weight: 500, пробовала ставить и на сам тег А. Если сделать bold, то они оживают.

Я уже склоняюсь к тому что это версия шрифта какая-то битая.

Спасибо за участие!

Share this post


Link to post
Share on other sites
5 минут назад, kapushoniha сказал:

Не работают ссылки с текстом 'this link', 'Windows', 'Mac' и другие

Может я что-то не так делаю, но у меня, по приведенной ссылке, все работает 🙂

Единственно что страница по ссылке this link недоступна

Share this post


Link to post
Share on other sites
40 минут назад, kapushoniha сказал:

Не работают ссылки с текстом 'this link', 'Windows', 'Mac' и другие.

У меня работает. Попробуй обновить страницу через ctrl+f5 и кеш очистить

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Tascan
      Здравствуйте. Попался мне в одном проекте этот конструктор шапок. Может кто работал с ним и может дать совет?
      Создаёт он стандартно шапку в три уровня(ряда), хотя любой из рядов можно отключить. С отключением ряда проблем-то нет, но мне понадобилось перед средним рядом и после него добавить пустые div-контейнеры.
      И вот тут появилась проблема. Код самой структуры этого конструктора я в файлах проекта найти не смог, как будто его там и нет. Все основные атрибуты и свойства созданной шапки хранятся в json формате и экспортируются/импортируются там же, в конструкторе. В json я не очень разбираюсь, но пытался добавить в него ещё одну строку (не уверен, что делал всё правильно), но конструктор как я понял больше трёх строк не принимает и просто пропускает их.
      Может кто знает как работает данный конструктор и может подсказать: можно ли как-то изменить код созданной шапки и добавить теги, или он работает только через конструктор в консоли?

    • By vladidik
      Ребята тем кому интересна тема веб разработки и основы html заходите на канал
      https://www.youtube.com/playlist?lis...O-kk6CcVLtYXYV
      так же информация для новичков будет дополняться.
      Основы HTML это не предел. в дальнейшем будет уроки по css, js по web фреймворкам. bootstrap и в дальнейшем будет объясняться натяжка вёрстки на wordpress
    • By Tascan
      Всем привет.
      Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.
      И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.
      Но стоило изменить единицы измерения в высоте:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.
      Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?
      И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.