css3-加载外部字体和文字排版

xiaodai8580 4年前 (2021-06-18) 494℃ 0次吐槽

网页页面中主要的内容呈现，是图片和文字。文字排版是网页布局里面需要掌握的第一种技能。

该案例主要涉及以下几个知识点：1、标题导入外部字体；2、首行首字文字变大；3、段落两端对齐。

1.从字体网站上下载特殊字体

http://fonts.mobanwang.com/hanyi/

2.把你下载的字体后缀名叫 xxx.ttf 的文件，复制，到

你当前项目中指定的文件中，例如放置到 font 文件中

3.你在项目的 css 样式中，引入特殊字体

@font-face{

font-family: '汉仪范笑歌隶书繁';

src: url('../font/汉仪范笑歌隶书繁.ttf');

}

4.在指定的标签上，用这种特殊字体

<h1 class="title">冬日暖阳下的那抹红</h1>

5.预览看效果

div.blog大盒子中包括header和article，其中这两个标签分别表示：

<header> 标签定义文档的页眉（介绍信息）

<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

html:

 <div class="blog">
      <header>
        <h1 class="title">冬日暖阳下的那抹红</h1>
        <p>江南风</p>
      </header>
      <article>
        <div class="content">
          <p>阳光明媚，岁月静好，周末又来和这棵树告白。</p>
          <p>
            上周末来时，你的叶子还是一片青色，今日再看，经已部全泛红，无法用语言来表达对你的喜爱，对你的爱像就我对传奇今生的爱热，随着时间的推移，只会爱的越来深越。喜欢你全身泛红的树叶，向你靠近，与你相拥，感觉你是那么的温柔，给人一种恋爱般的感觉。阳光穿过你泛红的树叶照射下来，我恋着你，不忍心将你的叶片摇落，小心翼翼的触碰的你。孩子们在旁边玩耍，也被你这片与众不同的红叶吸引过来，都说你好独特，也好喜欢。
          </p>
          <p>
            朋友在微信中问候：周末该恋爱的恋爱，该叙旧的叙旧，该陪父母的陪父母，该游玩的游玩，该联席的联系，用难得的一天经营各种感情，周末开心！我说，这个天气最适合出去约会......
          </p>
          <p>
            小时候最不喜欢的季节就是秋天和冬天了，因为秋冬的烟雨和寒风给人带来凉凄的感觉。我是一个愁多善感的人，更是一个多情的人，这份多情是对自己心中的那份挚爱恋恋不舍。所以每到这时候，会感到无比的孤寂和伤感。
          </p>
          <p>
            随着岁月的流失，现在有了自己的所爱和寄托，感觉不再讨厌这个季节了，反而更喜欢这个季节所带来那的一抹黄色，或是那抹一红色，亦或是那一片雪
            白……
          </p>
          <p>
            秋天啊......把你大地变成了一片金黄，却又载着满满的收货，带着喜悦，带着伤感，带着硕果累累，总之带着很多，让人欢喜让人忧，而我更喜欢那一片金黄还带着红……
          </p>
          <p>
            冬天啊......你把寒风带入世界各地，让人害怕又让孩子们期待你给地大穿上一层厚厚羽绒被，这样他们就以可在你把它收走之前尽情的舞动，然虽有时很冷，但你也会时不时送点暖意的阳光，让人们满心欢喜，满心感恩，而我又更喜欢寒风中独自盛开的一抹红……
          </p>
          <p>
            树叶呀......冬秋到来，你也害怕了，赶紧换装，给人们留下最美的印象后悄悄的随风飞逝，有些为艺术家的装贴画增添了一份美意，有些给洁清工增加一了份负担，但最终都是大给地增添了一份纯天然的肥料，而我又还是喜欢你那独特的黄或红……
          </p>
          <p>
            你们总是这样，既给带人来丰收的喜悦，也给人带来凄凉的感觉，但更为来年的新生埋下沃土，所以我想在此刻，尽情把你这片冬日里的温情住留，请不介要意我和你合影，只因为太喜欢…真的太喜欢！
          </p>
        </div>
      </article>
      <footer>——by 2021年12月02日</footer>

在我们的项目中base.css样式表中，加载外部字体。

@font-face {

font-family: '汉仪范笑歌隶书繁';

src: url('../font/汉仪范笑歌隶书繁.ttf');

}

接着，将外部字体，设置给页面中的类名叫title的h1--标题1标签去使用。

header h1.title{

font-family: '汉仪范笑歌隶书繁';

font-size: 100px;

text-shadow: 0 3px #fff;

}

修饰一个集合中很多多段中的第一段内容的第一个字

p:first-of-type 若干个段中的第一段

::first-letter 当前这个段中的第一个字

.content p:first-of-type::first-letter{

font-size: 50px;

}

css：

@charset "utf-8";
* { margin: 0; padding: 0 }
body { font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #222; background: #fff; }
img { border: 0; display: block }
ul, li { list-style: none; }
a { text-decoration: none; color: #000; }
a:hover { color: #000; text-decoration: none; }
.clear { clear: both; width: 100%; overflow: hidden; }
.blog { background: url(../images/bg.png) repeat; width: 50%; margin: auto; min-height: 800px; }
header { text-align: center; position: relative; overflow: hidden; padding: 90px 0 0; }
header:before { content: ""; background: url(../images/bg04.png) no-repeat; background-size: cover; width: 400px; height: 400px; position: absolute; top: -250px; left: -96px; transform: rotate(156deg); }
header:after { content: ""; background: url(../images/bg04.png) no-repeat; background-size: 100%; width: 240px; height: 240px; position: absolute; top: -135px; right: -76px; transform: rotate(249deg); }
header h1 { color: #068484; }
@font-face {
    font-family: '汉仪范笑歌隶书繁';
    src: url('../font/汉仪范笑歌隶书繁.ttf');
}
header h1.title{
    font-family: '汉仪范笑歌隶书繁';
    font-size: 100px;
    text-shadow: 0 3px #fff;
}
/* 修饰一个集合中 很多多段中的第一段内容的第一个字

p:first-of-type 若干个段中的第一段
::first-letter 当前这个段中的第一个字
*/
.content p:first-of-type::first-letter{
    font-size: 50px;
}


header P { margin: 20px 0; color: #999; }
article { line-height: 40px; text-decoration: #e2caa8 2px underline; text-indent: 2em; text-underline-offset: .5em; position: relative; overflow: hidden; }/*text-underline-offset 有些浏览器不兼容*/
article :before { content: ""; background: url(../images/bg01.png) no-repeat; background-size: cover; width: 200px; height: 200px; position: absolute; bottom: 14px; left: -60px; transform: rotate(52deg); }
article :after { content: ""; background: url(../images/bg01.png) no-repeat; background-size: 100%; width: 100px; height: 100px; position: absolute; bottom: 100px; right: -44px; transform: rotate(330deg); }
.content { padding: 0 88px; margin: auto; position: relative; z-index: 0; }
.content :before { content: ""; background: url(../images/bg02.png) no-repeat; background-size: cover; width: 80px; height: 44px; position: absolute; top: 0; left: 0; transform: rotate(52deg); z-index: -1; }
.content :after { content: ""; background: url(../images/bg05.png) no-repeat; background-size: 100%; width: 50px; height: 50px; position: absolute; top: 10%; right: 25px; transform: rotate(330deg); z-index: -1; }
footer { text-align: right; color: #93897a; padding: 30px; }
article p { margin: 30px 0; }


/* CSS Phone */
@media only screen and (max-width: 768px) {
.blog { width: 100% }
.content { padding: 0 10px; font-size: 15px; }
header:before { width: 160px; height: 160px; top: -78px; left: -8px; }
header:after { width: 160px; height: 160px; top: -78px; right: -8px; }
.content :after { top: 14% }
.content { padding-bottom: 60px }
article :before { bottom: 0; z-index: -1; opacity: .2; }
article :after { bottom: 0; }
}