Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By РоманФ
      Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.
      Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.
      И остро стоит вопрос чтобы это все дело было адаптивно.
      На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

    • By enkhe
      Доброго всем суток!
      Попросили оптимизировать сайт (поменять дизайн, обновить контент, добавить языки интерфейса - сайт на корейском cerokorea.com), помогите, пожалуйста, какие шаги необходимо предпринять. 
      Не являюсь "Сайтостроителем", но есть интерес разобраться самому. В следствии чего, я понимаю для начала необходимо зайти в админку поменять контент итп. Или же проще будет создать новый сайт на конструктарах и связать с доменом - какой конструктор выбрать и как связать с существующим доменом? 
       
      Буду рад любой ссылке и информации. Спасибо!
    • By victorius
      при ширине экрана @media(max-width:768px) в самый низ страницы верстки есть слайдер внутри него есть контент с картинкой хочу поместить картинку за границы слайда сверху но картинка обрезается. как сделать чтобы было видно
      ссылка на верстку  http://frontend-er.h1n.ru/asia-spa/
       

  • Member Statistics

    46,842
    Total Members
    1,451
    Most Online
    Suppilulima
    Newest Member
    Suppilulima
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Мучаюсь, не могу не как попасть на иконки вацапа и вайбера, используя карту изображений. Не как не пойму как эти координаты высчитать.   В итоге сделал три картинки и задал инлайн блок и всем картинкам ссылки.
    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
  • Popular Contributors

×
×
  • Create New...