啊!周五什么事情都不想做,闲来无聊时就各种折腾博客玩,网站 logo 是硬伤啊,也找了好几个 logo 素材图片鼓捣了一番,无奈 ps 水平实在烂的一比,怎么也无法满意。在看到从良未遂博客 logo 使用的是中文 web 字体时才猛然想起这样搞不就完了嘛!脑袋秀逗了,以前自己就这么搞过竟然忘记了......


说起中文字体,也是各种无奈,网页内容中的字体也调整过几次,总是无法满意,尤其是在非视网膜屏幕下,无论何种字体无论怎么调整文字大小、文字间距及行间距都不慎满意,所以在浏览博客的时候如果发现某篇文章文字又长又密的一大段,往往会忽略掉......看的眼疼啊!至于解决方法暂时还没想到,因此头脑中总有个邪恶的念头徘徊:换视网膜屏幕......!


不知为什么博客圈中使用文字 logo 的很多,但使用 @font-face 来美化的却并不多见,拖慢加载速度?不至于吧......反正我用过后无感觉,开网页还是一如既往的快。而且中文 web 字体搜索引擎一搜一大把,多如牛毛!因此我的选择恐惧症瞬间发作,各种挑来挑去,最后好不容易在站长之家看上一款字体:指尖花凉体,妈蛋竟然要付费 10 元!为了不再继续纠结浪费时间,一狠心支付宝付款下载使用!


@font-face 使用方法记录:
1.站长之家挑选一款自己喜欢的中文字体然后下载,由于中文字体不会对所有文字进行排版,所以一定要用自己想要应用这种字体的文字输入预览框,先预览一下看看显示效果是否生效!自己选择的“指尖花凉体”如下图:ziti


2.借助搜索引擎下载一款软件:Fontmin 将下载好的字体文件拖入 Fontmin 软件,然后输入自己想要生成的文字,点击生成按钮即可自动生成 web 字体,将生成的 web 字体文件上传至主题文件中。ziti


3.将如下 css 代码加入主题 style.css 文件顶部:

@font-face {
    font-family:"chenlun-logo";
    src:url("images/chenlun-logo.eot");
    src:url("images/chenlun-logo.eot?#iefix") format("embedded-opentype"),url("images/chenlun-logo.woff") format("woff"),url("images/chenlun-logo.ttf") format("truetype"),url("images/chenlun-logo.svg#des") format("svg");
    font-style:normal;
    font-weight:700
}

上述代码中的 font-family:"chenlun-logo"; 为自定义的字体名字,可以随便命名。
上述代码中的 chenlun-logo.eot 等为 Fontmin 软件生产的 web 字体。引用路径及字体名字随你调整。


4.最后在需要使用 web 字体的 logo 设置引用上述字体样式即可:

font-family: chenlun-logo,Microsoft Yahei,Arial;
  1. Loekman
    Loekman 2018-01-05 09:42 pm回复

    就这几个字用用问题不大,如果整个字体文件用那就要加载、渲染一点时间了

    1. 沉沦
      沉沦 2018-01-06 12:08 pm回复

      我感觉这个不是啥问题,关键是没有对所有文字都能渲染的自定义 web 中文字体吧?

  2. 从良未遂
    从良未遂 2018-01-06 10:06 am回复

    我一开始也想用ps做的,后来也是机缘巧合看到了web中文字体,改成web字体后直接渲染就好了

    1. 沉沦
      沉沦 2018-01-06 12:10 pm回复

      嗯,web 字体好处是无论怎么放大都能清晰呈现,但不同浏览器可能渲染效果不太一致?

  3. 明月清风
    明月清风 2018-01-07 04:25 pm回复

    我看你是生命不息,战斗不止。

  4. 姜辰
    姜辰 2018-01-07 10:43 pm回复

    引入一个字体,是不是有点大?= =
    我的uBlock Origin有时候会设置为禁止载入远程字体,那是不是不显示了?
    最后,我突然也想弄一个。。= =

    1. 沉沦
      沉沦 2018-01-07 11:02 pm回复

      不会很大,就是渲染几个字而已,才几 KB 。你说的禁止载入应该不会吧?……其实就是 CSS 的 @font-face 属性,一查就明白了。

      1. 姜辰
        姜辰 2018-01-07 11:11 pm回复

        唔?看样子可以考虑试试。

  5. 灰常记忆
    灰常记忆 2018-01-09 06:47 am回复

    以前很早就看到有人发过这样的字体教程,我是太懒了,你这个字体挺个性的。

    1. 沉沦
      沉沦 2018-01-09 01:33 pm回复

      web 中文字体一搜一大堆,谈不上个性,只要看着不是普普通通的微软雅黑就好。

  6. 秦大叔
    秦大叔 2018-01-09 10:55 am回复

    把LOGO做成图片不是更好吗?

    1. 沉沦
      沉沦 2018-01-09 01:28 pm回复

      色彩艳丽的图片 Logo 自己搞不定,而单单的简单文字 Logo 还是觉得自定义 web 字体更合适一些?

© 2018 Socode