我的按钮可以在移动设备上包含不同的字体吗？

Question

我正在尝试让我的按钮文本 ("Shop My Look") 包含不同的字体。我希望 "Shop" 和 "Look" 是 font= Overpass（它们现在是什么），"my" 是 font= Amiri-italic。我还希望标签在移动设备上显示时缩短为 "Shop"。我已经使用 @media 标签以其他方式更改移动按钮，但我无法缩短文本。我假设我的两个问题都是相关的，因为我需要将这三个词分开，以便 edited/css 可以单独应用于它们。不知道该怎么做。

您可以在此处查看我的网站：www.rachelclayton.co 并在 post-meta.post 下找到相关按钮。

我试过添加 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;
}
}

Answer 1

通过插入标签并使用 css 设置相应的样式来解决。请参阅以下更新 HTML：

<a href="<?php echo get_permalink() ?>">
    <span class="shop">Shop</span>
    <span class="my"> My </span>
    <span class="look">Look</span>
</a>

我的按钮可以在移动设备上包含不同的字体吗？

Can my button contain different fonts on mobile?

fonts

text

element

button

1

2