microsoftyahei字体下载:前端小编原创:如何潇洒的花式使用字体?-字体教程免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 字体教程
  3. 前端小编原创:如何潇洒的花式使用字体?

前端小编原创:如何潇洒的花式使用字体?

作者: 道格办公 • • 字体教程 • 浏览量 754

family和font-size属性只是基础，如果你想潇洒地使用字体，以下是一些花式技巧： 1. 使用自定义字体：除了常见的系统字体，你可以在网上找到各种免费或付费的自定义字体。通过使用@font-face规则，你可以将这些字体引入到你的网页中。这样可以使你的网页在视觉上更加独特而且个性化。 ```css @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.ttf'); } body { font-family

不管你是前端狗、设计师还是切图仔，你都绕不过搞字体这条路，虽然这条路并不是很难过，然鹅也是有一些注意事项的，请掏出小本，做好笔记：

普通地使用

人人都会的font-family

普通地引入

1
p{font-family:STKaiti;}/*华文楷体*/

此处有普通的注意：

在不同的系统中，预装的字体是不一样的，所以你在mac上引用Windows上的字体，是不会正常出现的。

以下是各系统的预装字体：

  • Windows操作系统

    黑体：SimHei

    宋体：SimSun

    新宋体：NSimSun

    仿宋：FangSong

    楷体：KaiTi

    仿宋GB2312：FangSongGB2312

    楷体GB2312：KaiTiGB2312

    微软雅黑：Microsoft YaHei （Windows 7开始提供）

  • macOS X操作系统：

    冬青黑体: Hiragino Sans GB （SNOW LEOPARD开始提供）

    华文细黑：STHeiti Light （又名STXihei）

    华文黑体：STHeiti

    华文楷体：STKaiti

    华文宋体：STSong

    华文仿宋：STFangsong

下面开始花式使用~撒花~(≧▽≦)/~啦啦啦

花式使用

花式第一招：同时引入多种字体

1234
p{font-family: Georgia, "Times New Roman","Microsoft YaHei", "微软雅黑",STXihei, "华文细黑",serif;}

花式注意：

  1. font-family的规则是：

  • 如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。

  • 如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。

  • 优先使用排在前面的字体。

  • 根据以上规则，font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往会非常的吃藕（丑）。

  • 为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，”微软雅黑”的英文名称是Microsoft YaHei。

    此外，中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

    • 上面的那堆简洁粗暴的总结一下就是：

    想优先用哪个搞前面，英文字体搞前面，中英文名儿都搞上，汉字加引号，有空格加引号<(￣︶￣)↗

    花式小细节：

    serif和San-serif分别代表衬线体和无衬线体

    花式第二招：引入自己下载到本地的字体

    哦嗬嗬嗬嗬~

    这里就要开始使用你们好多人都搞不懂的@font-face啦~然鹅并没有什么好怕的，跟着我做就可以了~

    首先先去下载一个自己喜欢的字体，参考地址：

    中文字体-http://font.chinaz.com/zhongwenziti.html

    英文字体-http://www.1001freefonts.com/

    然后下载字体文件到本地，一般字体文件的格式有.ttf .otf .woff eot和.svg,找到它们放在你的字体文件夹就可以了

    例如我们的目录结构是

    ├── index.html

    ├── css

    │ └── index.css

    ├── font

    │ └── windy.ttf

    index.html

    12345678
    <html><head><link rel="stylesheet" href="css/index.css"></head><body><p>today is windy.</p></body></html>

    index.css

    12345678910
    /*要先引入fontface*/@font-face{	font-family:windy;/*windy可以自定义为任何名字*/	src:url('../font/windy.ttf');}/*然后再用到你想用的地方*/p{	font-family:windy;/*用上刚才我们命名的windy*/	font-size:16px;/*然后正常设置一些其他的就好啦*/}

    然后就阔以啦~

    别走哟~下边还有233333

    吃瓜群众一：我想搞百度手机版的图标，可是审查元素都找不到在哪里诶……

    吃瓜群众二：好多其他站的icon也是，并没有发现图片文件在哪里……

    吃瓜群众三：你们啊，too young！

    以下是三号吃瓜群众的独白，与本作者无关

    吃瓜群众三：你们知道iconfont这个东西么？

    众吃瓜群众：不知……

    吃瓜群众三：不知道还不赶紧去看

    （于是众人赶紧去到iconfont官网 http://www.iconfont.cn/plus）

    iconfont.cn是马云爸爸家的UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。

    官方字体库界面（http://iconfont.cn/collections）长这样

    另外还有很多其他公开库可以使用

    如果我们想要找某一类型的字体图标，只要在搜索框输入关键词就可以啦

    然后就粗现了很多西瓜

    此时，如果只需要图像格式的话，直接下载选择格式就好了

    但是，如果我们希望它是以字体图标写进html的话，就要先加入购物车里

    然后下载到本地

    会有一个文件夹包含demo.html demo.css iconfont.css和四个字体文件

    打开demo.html会有已经写好的示例~

    总的来说有两种方式可以使Html页面引入iconfont

    第一种：

    css

    1234567
    @font-face {font-family: 'iconfont';src: url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}

    html

    1
    <i class="iconfont"></i>

    第二种：

    css

    12345678
    @font-face {font-family: 'iconfont';src: url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}.icon-xigua:before { content: "\e7a3"; }

    html

    1
    <i class="icon-xigua iconfont"></i>

    蓝后，你的页面就阔以出现西瓜啦，再根据需求添加样式吧~

    貌似大家已经从三号吃瓜群众那里知道iconfont了，除了iconfont，常用的字体库还有iconmoon 和bootstrap的fontawesome,它们的使用方法也同样很简单

    以fontawesome为例

    首先下载字体库到本地

    蓝后将font-awesome.min.css引入你的页面，注意路径

    12345
    <link rel="stylesheet" href="../css/font-awesome.min.css">/*如果需要兼容的话*/<!--[if IE 7]><link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"><![endif]-->

    通过应用 icon-large (增大 33%), icon-2x, icon-3x 或 icon-4x 样式让图标变得更大。

    1234
    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

    结果如下图

    是不是感觉很神奇呢噢嗬嗬嗬嗬嗬嗬~~~

    话说这个主题真是没完没了啊，靠着写字体撑起一片天……好了，主要是因为web技术发展的迅速，我们又可以用上多色字体了，多色字体顾名思义，区别于以往普通的单色icon，拥有更加生动丰富的色彩，同时又更方便控制，很是值得尝尝鲜的~

    首先打开马云爸爸家的iconfont之多色字体库,wow，果然有钱最能促进高科技了

    OK,那么其实使用起来也并不是很困难，如果你已经看过这个系列的第二篇:如何花式使用字体（二）的话，流程基本是差不多的

    作为一个吃货，我们选一个食物的多色字体库

    然后让我们唱起来：I have a pen,I have an apple……

    把Apple加到购物车，点击页面右上角的购物车，下载代码

    然后你会得到一个含有示例的文件夹

    多色字体主要用了symbol引用这种全新的引用方式，所以我们找到demo_symbol.html文件，打开可以得到一个苹果的多色字体引用示例

    具体使用symbol引用产生多色字体方法如下：

    Step1: 引入js

    在<head>里引入文件夹里的iconfont.js

    123
    <head><script src="iconfont.js"></script></head>

    ※注意路径

    Step2: 引入通用CSS

    12345678910111213
    <head><meta charset="utf-8"/><title>多色字体吃瓜教程</title><script src="iconfont.js"></script><style type="text/css">.icon {width: 1em; height: 1em;/* 改变图标大小*/vertical-align: -0.15em;/* 垂直对齐方式*/fill: currentColor;/*图标颜色*/overflow: hidden;/*解决溢出部分*/}</style></head>

    tips:

    • width,height单位不限于em,可以是px,rem等

    • vertical-align可以是middle,baseline或数值等

      默认图标和文字相邻时，图标比baseline还要低(0.15em)x行高x100%

    • 由于图标是用svg绘制，默认采用自带的配色，如需更改去iconfont.js里修改path的fill即可

    • path 和 stroke 溢出 viewBox 部分在 IE 下会显示，normalize.css 中也包含此句

    Step3: 写入HTML

    123
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-Apple"></use></svg>

    ※注意类名一致

    ※为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了aria-hidden=”true”，简言之，当你用一些读屏软件时，不会听到I have an apple icon这种怪东西

    经过以上三步，一个引领时代潮流的多色图标

    就会展现在你的页面上啦~快点去跟小伙伴们炫（zhuang）耀(thirteen)吧~~(≧▽≦)/~

    喜欢就关注小编哦~小编有一大堆原创在肚子里已经迫不及待要出来了233333

    文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Frontend%20editors%20original%20How%20to%20use%20fonts%20chicly%20and%20fancy.html

    赞 (810)
    打赏 支付宝扫一扫 支付宝扫一扫
    Lomu story 专栏作者
    48 196
    single-end

    相关推荐