Я пытаюсь, чтобы текст моей кнопки («Магазин мой взгляд») содержал разные шрифты. Мне бы хотелось, чтобы «Магазин» и «Внешний вид» были шрифтом = Overpass (то, что они есть в настоящее время), а «Мой» - шрифтом = Amiri-italic. Я также хотел бы, чтобы ярлык сокращался до "Магазин" при отображении на мобильном телефоне. Я использовал тег @media для изменения кнопки другими способами для мобильных устройств, но не могу сократить текст. Я предполагаю, что обе мои проблемы связаны с тем фактом, что мне нужно разделить три слова, чтобы их можно было редактировать / к ним можно применить индивидуально. Не уверен, как это сделать.
Вы можете посмотреть мой сайт здесь: www.rachelclayton.co и найти нужную кнопку под сообщением в post-meta.
Я пытался добавить HTML:
1
<span Style= font-family: “overpass”>Shop</span> <span Style= font-family: “amiri”>my</span>
<span Style= font-family: “overpass”>Look</span>
2
<em>style=“font-family:amiri">my</em>
HTML:
<div class="shop-social">
<div class="shop-my-look">
<a href="<?php echo get_permalink() ?>"><?php esc_html_e('Shop My Look', 'alder' ); ?>
</a>
</div>
</div>
CSS:
@media only screen and (max-width: 490px) {
.post-meta .shop-social a {
background: #ffff;
border: 1px solid #dfdfdf;
color: #2e2e2e;
display: block;
font-size: 11.5px;
font-weight: 400;
height: 40px;
letter-spacing: 2px;
line-height: 40px;
width: 2em;
padding: 0 4px;
text-align: center;
}
}