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 victorius
      при ширине экрана @media(max-width:768px) в самый низ страницы верстки есть слайдер внутри него есть контент с картинкой хочу поместить картинку за границы слайда сверху но картинка обрезается. как сделать чтобы было видно
      ссылка на верстку  http://frontend-er.h1n.ru/asia-spa/
       

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

    • By vladidik
      Ребята тем кому интересна тема веб разработки и основы html заходите на канал
      https://www.youtube.com/playlist?lis...O-kk6CcVLtYXYV
      так же информация для новичков будет дополняться.
      Основы HTML это не предел. в дальнейшем будет уроки по css, js по web фреймворкам. bootstrap и в дальнейшем будет объясняться натяжка вёрстки на wordpress
  • Member Statistics

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

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • сделал класс narrow чтобы уменьшить ширину, но на место не возвращается блок читал что ширина сетки 960px, а в шаблоне ширина 1140px
    • Потому что 1-й блок не имеет отступа слева. А 4-й имеет, из-за чего доступная область на втором рже меньше.
      В связи с этим последний блок "перескочил" на следующую строку только потому, что ему не хватает места.
    • <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <h2>Обратная связь</h2> <form name="MyForm" action="#openModal" method="post"><br> <input name="name" style="width: 420px" type="text" placeholder="Ваши фамилия, имя, отчество" /><br> <input name="tel" style="width: 420px" type="tel" placeholder="Ваш номер телефона" /><br> <input name="email" style="width: 420px" type="email" placeholder="Ваша электронная почта" /><br> <textarea name="body" style="width: 420px" placeholder="Ваше сообщение"></textarea><br> <br>Нажимая на кнопку "Отправить", я даю согласие на обработку своих персональных данных в соответствии с <a href="politika.htm" target="_blank">Политикой конфиденциальности</a><br> <p style="text-align: center"><input type="submit" value="Отправить" id="btnpng4" /></p> </form> <?php if (isset($_POST["email"]) || isset($_POST["tel"])){ if (isset($_POST["name"])) {$name = $_POST["name"];} if (isset($_POST["tel"])) {$tel = $_POST["tel"];} if (isset($_POST["email"])) {$email = $_POST["email"];} if (isset($_POST["body"])) {$body = $_POST["body"];} if(empty($email) or empty($name) or empty($body)){   //отправка сообщения на email } else if(empty($tel) or empty($name) or empty($body)){   //отправка сообщения на tel } else{   //вывод предупреждения, что не заполнены обязательные поля } комментарии    
      Заменить на соответствующий код который будет выполнять эти действия
  • Popular Contributors