CSS3.0使用@font-face自定义字体

最新推荐文章于 2024-04-22 14:21:48 发布

博勋

最新推荐文章于 2024-04-22 14:21:48 发布

阅读量1w

点赞数 2

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/qq_31280709/article/details/51154147

版权

HTML & CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

@font-face是CSS3.0里面的模块，能将自定义的字体添加到网页中。

index.html文件

<!doctype html>
<html>
<head>
    <title>css3.0 @font-face</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>myblog</h1>
</body>
</html>

index.css文件

@font-face {
    font-family: '汉仪雪君体简';
    src:url('./fonts/汉仪雪君体简.ttf') format('truetype')，
	  url('./fonts/汉仪雪君体简.eot') format('embedded-opentype')，
	  url('./fonts/汉仪雪君体简.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}
h1{
    font-family:"汉仪雪君体简";
}

如以上代码所示，@font-face的语法规则如下:

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

注：
1、YourWebFontName:此值为你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如font-family: '汉仪雪君体简';
2、source:此值指的是你自定义的字体的存放路径；
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等。不同浏览器对字体格式的支持不同，一般来说至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
4、weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。

5.下载字体：https://www.google.com/fonts
获取@font-face所需字体格式：https://www.fontsquirrel.com/tools/webfont-generator

博勋

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3.0使用@font-face自定义字体

@font-face是CSS3.0里面的模块，能将自定义的字体添加到网页中。index.html文件 css3.0 @font-face myblogindex.css文件@font-face { font-family: '汉仪雪君体简'; src:url('./fonts/汉仪雪君体简.ttf') format
复制链接

扫一扫