admin管理员组

文章数量:1594755

  前端引入外部字体

前端字体不美观，如何下载并引用外部字体呢？

字体文件下载

  很多网站都提供字体下载，其实我们需要的只是一个 ttf文件，这个网站可以提供免费的ttf字体文件下载：http://www.downcc/font/

格式转换

  不同的浏览器需要不同格式的字体文件，一般我们需要的有 eot svg ttf woff 这几类字体文件来适应不同的浏览器，这里提供一个可以格式转换的网站：https://www.fontke/tool/convfont/ 上传我们下载的 ttf文件 后，选择想要的格式，进行转换下载即可。

CSS引入

将下载好的几种格式文件放入我们的项目中（最好建一个文件夹专门用于存放字体），在 CSS 文件中写入：

/*引入外部字体*/

@font-face {
    font-family: "布丁体";
    src: url("../src/font/布丁体.eot"); /* IE9 */
    src: url("../src/font/布丁体.eot?#iefix")
    format("embedded-opentype"),  /* IE6-IE8 */
    url("../src/font/布丁体.woff") format("woff"), /* chrome firefox */

    url("../src/font/布丁体.ttf") format("truetype"), /* chrome firefox opera Safari Android IOS 4.2+ */

    url("../src/font/布丁体.svg#布丁体") format("svg");  /* IOS 4.2- */
    font-style: normal;
    font-weight: normal;
}

注意这里我用的是 “布丁体”，url() 里是我的字体文件在项目中的存放路径，根据自己引入的字体修改字体名字。

使用

.class {
    font-family: '布丁体', serif;
}

serif 是字体引入失败时的备用字体，也可以不添加。

参考文献

  1. http://www.one-net/post/196.html
  2. https://my.oschina/Cubicluo/blog/888505

本文标签： 字体

版权声明：本文标题：前端引入外部字体 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728201087a1149383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。