CSS设置特殊字体@font-face

小马程序员

于 2024-07-25 10:31:33 发布

阅读量110

点赞数 5

分类专栏：前端文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/weixin_58622844/article/details/140681915

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS设置特殊字体@font-face

一、前后效果图对比

1.1 加载字体前

在这里插入图片描述

1.2 加载字体后

在这里插入图片描述

二、操作步骤

2.1 下载需要的字体，后缀可能是 .ttf ，.eot，.svg等，笔者使用的下载地址：字体天下可以免费下载。

新建文件夹 font 保存下载的字体，新建 font.css 文件
在这里插入图片描述

2.2 font.css 文件配置

@charset "UTF-8";
 /*定义字体*/
@font-face {
    font-family: "YouSheBiaoTiHei-2";
    src: url('YouSheBiaoTiHei-2.ttf');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

2.3 字体引用

Layout.css 引入 font.css

@import url('../../res/font/font.css');

.ship-page-title {
    flex: 1;
    display: flex;
    z-index: 4;
    font-weight: 400;
    font-size: 30px;
    text-align: center;
    justify-content: center;
    font-family: YouSheBiaoTiHei-2;
    color: white;
    margin-top: 0;
}

三、@font-face语法简介

3.1 规则

@font-face {
 font-family: YourWebFontName;
  src: url('fontName.woff') format('woff'),
      url('fontName.ttf') format('truetype'),
      url('fontName.svg#fontName') format('svg');
  font-weight: <weight>;
  font-style: <style>;
}

3.2 规则详解

font-family: <YourWebFontName> ：自定义字库名称，后续样式规则中则通过该名称来引用该字库。
src ：设置字体的加载路径和格式
srouce ：字体的加载路径，可以是绝对或相对URL。
format ：字体的格式，主要用于浏览器识别，一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight ：字重