如何使用CSS更改网页字体

为特定的单词、段落或整个网页设置字体

简单的样式选项允许您使用级联样式表更改网页的字体。使用CSS设置单个单词,特定句子,头条新闻,整个段落,甚至整个文本的字体。

下面的屏幕截图适用于jsfiddle.net代码游乐场,但无论在哪里实现代码,所描述的概念都是如此。

改变与css代码的人的例证字体在计算机屏幕上
Derek Abella / 乐动体育赞助Lifewire

如何用CSS改变字体

制作HTML.使用任何HTML编辑器或文本编辑器,CSS更改更改。

  1. 找到要更改字体的文本。我们将用它作为一个例子:

    本文在Arial
  2. 用SPAN元素包围文本:

    本文在ARIAL 
  3. 添加属性style =“”到SPAN标签:

    本文在ARIAL 
  4. 在样式属性中,使用该样式更改字体字体系列风格。

    此文本在ARIAL 
    HTML中字体家庭选项的屏幕截图
    乔恩费舍尔
  5. 保存更改以查看效果。

使用CSS更改字体的提示

  1. 最好的方法是始终至少有两个字体字体堆栈(字体列表),因此如果浏览器没有第一个字体,它可以使用第二个字体。

    使用逗号分隔多个字体选项,如下所示:

    Font-Family:Arial,Geneva,Helvetica,Sans-Serif;
  2. 上面概述的示例使用内联造型,但最好的一种造型用A.外部样式表修改超过一个元素。使用类设置在文本块上的样式。

     

    本文在ARIAL

    在这个例子中,用于样式化上面HTML的CSS文件如下所示:

    .arial {Font-Family:Arial;}
    外部CSS字体家庭选项的屏幕截图
    乔恩费舍尔
  3. 始终结束CSS样式,具有分号(;)。当只有一种风格时,这不是必需的,但它是一个很好的习惯。

此页面是否有帮助?