如何修改“超赞字体”中的文本？

Question

<i class="fa fa-envelope fa-lg">
    robfran@gmail.com
</i>

我有以下代码。 如何更改“ example@gmail.com”的字体类型？

Answer 1

我假设您想要的不是Font-Awesome的字体。

做这样的事情：

HTML

<i class="fa fa-envelope fa-lg"></i><span class="email_font">example@gmail.com</span>

CSS

span.email_font {
    font-family: "Times New Roman", Georgia, Serif !important;
}

如果在计算机/浏览器/手机上未加载Times New Romans，则Times New Roman是电子邮件地址的字体，Georgia和Serif是备用字体。

您还可以指定font-style:可以是普通，斜体和斜线）， font-weight:可以是普通，粗体或数字）和font-size:以px为单位的数字或％等）。 还有其他的，但是这些是基础。

所以我们可以做

span.email_font {
    font-family: "Times New Roman", Georgia, Serif !important;
    font-style: italic !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

这样，您就可以在Times New Roman中使用斜体，粗体和15px大小的电子邮件。 我添加了!important以确保实现这些样式。

如果您想以内联方式进行简化，请不要这样做。

<i class="fa fa-envelope fa-lg"></i>
<span style="font-family: 'Times New Roman', Georgia, Serif; font-style: italic; font-weight: bold; font-size: 15px ;">example@gmail.com</span>

Answer 2

FontAwesome使用css ::before伪元素应用字形字体。

更改.fa选择器的字体时，字形消失的原因是因为FontAwesome样式表将字体应用于.fa选择器。

您要做的就是使用.fa选择器更改字体，然后将.fa::before选择器重置回FontAwesome。

 i.fa { font-family: mono; } i.fa::before { font-family: 'FontAwesome'; }

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-envelope fa-lg">robfran@gmail.com</i>

Answer 3

您可以将文本放在一个带有类的跨度中。 在样式表中的类上更改字体。 例如：

<html>
<head>
    .anotherFont 
    {
        font-family: sans-serif;
    }
</head>

<body>
    <i class="fa fa-envelope fa-lg"></i>
        <span class='anotherFont'>
            robfran@gmail.com
        <span>
</body>
</html>

如何修改“超赞字体”中的文本？

问题描述

3 个解决方案

解决方案1
3 2015-05-27 19:01:28

解决方案2
1

解决方案3
0 2015-05-27 19:06:11

如何修改“超赞字体”中的文本？

问题描述

3 个解决方案

解决方案1 3 2015-05-27 19:01:28

解决方案2 1

解决方案3 0 2015-05-27 19:06:11

解决方案1
3 2015-05-27 19:01:28

解决方案2
1

解决方案3
0 2015-05-27 19:06:11