wokenqingtian's Blog

Web中文炫酷字体的使用

疑问+理论

其实我一直在纳闷,为什么Google Fonts在网上托管那么多英文字体,为什么不搞几个在线托管中文字体呢?

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);

就像这样,一句话搞定,多爽。

原来,英文字体只用搞定26个字母+标点符号
而由于中文字体的特殊性,一个字体最少也要好几个MB,这样在浏览网页的时候,用户还要去下载你的字体,这样就影响流畅度。所以,一般都会选择操作系统预装字体进行开发。(想了解如何更好的使用操作系统字体请看 阮一峰这篇博文 ,这里不做阐述。)

但是,有时候,网页的一级标题,二级标题,我们还是想用更漂亮的中文艺术字体怎么办?

思路:把你想要变成独特字体的那一小部分字,从艺术字体里提取出来,给你的网页用,这样的话,抽取出来之后的字体文件就小了很多,可能只有十几kb而已。

这里就要使用一个CSS3的模块,@font-face,下面给出常见用法

@font-face {
    font-family: "造字工房形黑粗体";
    src: url("造字工房形黑粗体.eot"); /* IE9 */
    src: url("造字工房形黑粗体.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("造字工房形黑粗体.woff") format("woff"), /* chrome、firefox */
    url("造字工房形黑粗体.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("造字工房形黑粗体.svg#造字工房形黑粗体") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

注意,这里只是给你看一下,不用着急复制粘贴,瞄一眼就好。

步骤简述

  1. 提取字体 + 字体格式转换
  2. 把转换过的eot、woff、ttf、svg字体全部拷贝到项目中去
  3. 在css中插入相应的@font-face语句
  4. 在需要使用的地方调用font-family: "xxxxx";

详细操作

  1. 下载百度 是百度EFE出品的 Fontmin软件,并安装。
  2. 下载你想要的字体(字体格式:ttf)(由于好看的中文字体都很贵,所以我最终求助了万能的淘宝)
  3. 打开刚安装好的Fontmin,并在软件左侧窗口输入你希望加载特定字体的文字
  4. 把你下载好的字体,拖入软件左下方框框中,并点击生成按钮
    可以看到字体已实时改变 但请注意,有些情况下,莫名其妙会没有效果,那只好请亲再换一个字体吧…不过大部分字体是ok的
  5. 得到两个css文件,与4种字体
  6. 打开项目文件夹,在app/assets/里新建一个fonts文件夹,并把上一步得到的4个字体,拖入fonts文件夹中
  7. 打开xxxx-embed.css文件,注意是带有embed的css文件(另一个放在scss中无效),复制所有代码,粘贴到application.scss(或是你未来会调用该代码的scss文件中)
  8. 并在scss你想改变的元素中,直接用字体名调用,与调用其他字体一样
    比如像这样我在我项目中的这个teal-text中调用了font-family: "造字工房朗倩粗体";
  9. 刷新页面,得到结果

我的作品

面向妹子程序员的招聘网站
实现的功能:
首页:
图片轮播+文字轮播,嵌入视频,滑动导航栏
职缺展示页:
精美多条件搜索框(带折叠窗)


华丽卡片Flash Card视频卡展示公司环境

ORID - 2017.4.24

Objective (客观描述事实)

完成了工作展示卡片的美化工作
对User与Job的model进行了更新
尝试更改user的devise的edit界面,已经可以上传头像,图片,视频
尝试开始写seed
看Nic老师的直播

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 疲惫+亢奋
  • 今天的高峰是什么?
    • 发现有一个北京寄过来的顺丰快递,难道是全栈营?礼物?还是神马?
  • 今天的低点是什么?
    • 没有
Interpretative (分析寻找意义何在)
  • 今天学到了什么?
    • 图片自适应用img-responsive
    • chrome网页截屏插件ful page screenshot
    • devise自定制view的大概步骤,rails g devise:views -> 去更改相应的view -> rails g controller registration(并在里面继承Devise,然后对相应的方法进行重写,或者新填入一些有预设名字的private 方法) -> 去routes里把对应的devise路径改为我创建的这个RegistrationController
    • 居中的终极大杀器,flex
      //杀器一 transform
      position: relative
      top: 50%
      transform: translateY(-50%)
      
      
      
      

      //杀器二 flex
      display: flex
      flex-direction: column
      justify-content: center


      • 今天的一个重要的领悟是什么?
      Decision (决定下一步的行动)
      • 再不迭代第二版,我就可以去死了....

ORID - 2017.4.23

Objective (客观描述事实)

参加成都第三次meetup
已搞定卡片展示的雏形
要就一晚上devise+modal的跳转bug没有搞定

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 兴奋依旧
  • 今天的高峰是什么?
    • 参加meetup
  • 今天的低点是什么?
    • 搞了一晚上devise+modal的跳转bug失败而告终,失望
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • devise是允许你对其view进行定制的,且你可以创建一个controller去继承Devise,然后重写父类的方法,我觉得如果要使用好devise需要去看源码
    • 每次参加meetup都是最耗费精力的一件事,不过我隐隐感觉到,这两个月的感觉也许以后都难有机会再找回,好好珍惜它吧。
    • 知道了一种很新颖的玩法:李佩忆同学,把她所有羡慕的人都列出来,然后按权重进行排序,来达分析自己,寻找方向的一种方法,我觉得相当有意思。
  • 今天的一个重要的领悟是什么?

    • 乱的乱的乱的...
Decision (决定下一步的行动)
  • 完成第二页

ORID - 2017.4.22

Objective (客观描述事实)

完成搜索框的美化
完成简历上传aws s3
会用一点jquery,并自己写了一点代码

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 巨巨巨烦躁,巨巨巨兴奋,哈哈哈哈
  • 今天的高峰是什么?
    • 今天有多个高峰,解决了难以想象的bug,自己写出了可以用的js代码
  • 今天的低点是什么?
    • 搞定bug之前,秒秒钟都是低潮
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • 项目中最好还是引入jquery-ui-rails,很多jquery的UI交互都需要它
    • 在纠结如何用css达到获取点击事件然后弹出窗口几个小时之后,猛回头,发现jquery就在那里,都为你准备好了,就看你要不要看了.....
    • gsub是在string里对符合正则表达式要求的字符进行替换
    • ransack是可以多条件搜索的,目前看到大家用的方式都还比较单一,但你稍微看一下文档,就发现,很强大的,感觉自己弱弱的...
    • figaro + fog + carrierwave + aws s3 满足上传云服务, 完美~(不过有很多坑,都是关于云服务器secret key的,但我在睡觉前,奇迹般的解决了,哈哈哈哈)
  • 今天的一个重要的领悟是什么?

    • 发现今天给助教提的问题,最终都是我自己解决的,现在项目复杂了,你很难在网上全面的跟另外一个人描述清楚状况,基本上都是要自己把所有的屎吃一遍,才会在某一个瞬间,胜利的光芒照在你头顶上
    • 今日,乃我学习变成以来最兴奋的一天,各种bug杠杠解,哈哈哈哈
Decision (决定下一步的行动)
  • 把上传图片的带进来,同时把工作展示卡加入项目,然后…然后很快第二个版本就可以上限了,哈哈哈哈哈

ORID - 2017.4.21

Objective (客观描述事实)

又有了两个新点子
完成了搜索功能,正在优化搜索框
flashcard + 翻页功能也有雏形
注册了aws但要等24小时才能开始使用

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 异常烦躁,越发觉得html+css的布局好多莫名其妙的情况,各种不能实现
  • 今天的高峰是什么?
    • 把flashcard的基本功能实现
  • 今天的低点是什么?
    • 搜索框的美化,我只想说:TNND
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • 关键词:display, !important, z-index(图层的层级), transition(设置转换时间)
    • 感觉float可以研究一下
  • 今天的一个重要的领悟是什么?

    • 领悟个屁,html布局快整死老子了...
Decision (决定下一步的行动)

完成工作展示页面,发布第二个版本更新

ORID - 2017.4.20

Objective (客观描述事实)

3个小时写了一篇博文
看完项目管理视频
看了Xdite老师的直播
关于工作信息展示页面有了一个点子

Reflective (主观描述感想)

  • 你要如何形容今天的情绪?
    • 写的博文得到了认同,相当高兴
  • 今天的高峰是什么?
    • 自己的作品终于有人问津,好高兴
  • 今天的低点是什么?
    • 苦于不知道该如果开始工作信息展示页面的工作

Interpretative (分析寻找意义何在)

  • 今天学到了什么?

一句话:项目管理就是时间管理,时间管理的标准是:你如何定义成功

举例:
定义成功:Hackathon的成功是如何告诉评委你的产品有价值?

成功的详细解读:

  • 点子肯定要好
  • 点子肯定要好
  • PPT是脸,所以要打整好
  • 没人会看你代码,你不要报错就行

时间管理:

  • 辅助理论:莫非定律(可能会出错,那就肯定会出错)
  • 2:1 2份的时间做开发,1份的时间做调试

项目管理:

  • 只做一个功能
  • 花更多的时间写PPT

其它感想:
Xdite老师原来参加过很多次Hackathon,才经过魔改两天的历练,就已经感觉掉了一层皮,充分说明人生中应该时不时就参加Hackathon这样节奏的事情,老师现在在创业压力不比Hackathon小,所以明显感觉到,寻找外界的压力,其作用还是很大的,压力会把自己推向一个意想不到的层面。

  • 今天的一个重要的领悟是什么?
    • 如果说Hackathon中PPT是关键,那我想说魔改大赛中与项目相关的高质量技术博文是关键

Decision (决定下一步的行动)

  • 一天内完成工作页面展示的页面

魔改大赛这样开始比较快

写在前面

魔改开始还差两天的时候,我正式开始,并决定先去研究一下论坛上与logdown上上一届排前几名的选手的前进轨迹,与心得文章,看能不能找出什么端倪。

完美主义病
其中发现提到次数最多的是,大多数人都多少有完美主义病,总是翻翻翻,看各种好看的网页,看各种好看的html模版,却就是迟迟不开始,这里有一个致命的影响,就是,这会导致你网站上线时间比较滞后,错过了前期比较好的曝光时间。

营销
营销这个词,出现的概率仅次于完美主义和曝光,大概的意思就是,你需要不断的去营销自己,但鉴于这是一个处于学习搭建网站的比赛,那其实,真正的点应该是,别人到你这来,是否可以学到东西,从而避免踩坑。

我上来的选择是先,把搜索功能,做出来,找到一片logdown,发现,并不复杂,跟着做就基本实现了

于是我开始,寻找各种美丽的模版,找找找着了一大堆

开始的时候浏览器跟我一样的有木有,有的点个赞,哈哈哈

通过之前的调查,大概就是这么几种起步的方式:

  • 一个是在youtbe上找一个rails相关的leadingpage,然后跟着做
  • 一种是找到真实的网站原样拷贝(如拷贝无印良品)
  • 一种是跟着w3c的template跟着做一个基本的,然后再慢慢改
  • 一种是下载bootstrap上的template然后慢慢进行更改
  • 一种是直接花钱买高品质的网站成品(如淘宝,或国外更多,没钱,更何况买的意义不大)
  • 一种是跟着教程里的一步一步的做,在教程的基础上进行更改就好了

我想说,准备魔改的第一天,我把这几种方法全部都尝试了一遍,不是说我时间多,闲的慌,想都试一试,
而是在这每一种方法里我都会各种吃屎,而且不是小屎,是各种大屎。

一、吃屎阶段(大家不用吃,看我吃就好)

Shit 1:

我选择从 Bootstrap官方模版开始,选择了这个风格的模版


于是,把模版下载下来,打开文件夹一看


这都是什么鬼?然后我就去找了几片技术博客,大概看了一下,需要把里面的js与css以及html内容拷贝到你自己的项目中去
折腾了半天,终于出了效果。
但接下来就傻眼了,我根本就不知道自己刚才干了什么....
我也不知道我接下来该,干什么....
于是,又继续浏览网页,浏览那些精美LandingPage,仿佛自己已经做出来了.....

Shit 2

我想到之前看到有个学姐通过原样复制无印良品作为开始,于是乎,我也开始尝试尝试
兴致勃勃的选中了一个漂亮的招聘网站,有件inspect,查看代码


可是,然后呢?然后该怎么做呢?于是呼,又跑去看了一下学姐的博客,
先右键查看源代码,然后把源代码全都复制到welcom/index.html.erb里去
然后再在网页上右键inspect,点上方的sources

把里面的css,js,image都拷贝到自己的项目里
一般拷贝到自己项目里,还涉及到需要把拷贝来的html代码里的图片地址代码做相应的更改(这个全栈的教程里有讲)
然后发现有些字体不行,有些效果没有显示出来...等等,各种莫名其妙的问题
花了老半天,终于折腾差不多了,又回到了同一个问题:
So what?What’s next?接下来该做什么?
回去翻一番html代码,又看着一大堆新加入的css,js,
甚至html里也有js,css,代码,这特么不应该写到assets里的js与css文件夹里的文件中去吗?什么情况?
整个人,于是又陷入一头雾水的情景中去…
于是,又打开浏览器,开始漫无目的的浏览....

Shit 3

这个时候,我想起来,还有一个学姐的做法是,从youtbe上找一个landingpage的视频,跟着做,于是,我就打开youtube,找了一个15分钟制作landingpage的视频,跟着做
做啊做啊做,做到一半就卡住了,那个视频是3年前的,有很多步骤我在操作的时候,会有不同的结果....
再次晕倒....
不过视频至少看完了,知道,其实播主,实际上就是从bootstrap template上移植一个到项目中来

于是,我就又找了一个博客,内容也是做的类似的事情,就跟着做,于是做完了

于是,我又陷入沉思....
同样的问题:接下来该怎么办....

Shit 4 5 6 7 ….

过程中我还尝试过跟着W3C的template做....
跟着其他学长的博客做....
跟着全栈课程做....
都是吃的同样的屎....

所有的Shit都是同样的问题:复制粘贴 -> 然后该怎么办?

二、如何快速起步魔改 解决方案

接下来,我说一下,我探索出来的魔改快速上手之路

大前提:之前的自学HTML自学CSS两份作业有认真做,这个很重要

(1)理解两个知识点:

魔改LandingPage的制作实际上就是在做:

做网页元素的排布
调节间距 margin padding
调节字体样式/大小/颜色 font-size font-family color
调节背景颜色/图片 background background-color
要不要换行
一行元素宽度占比多少

HTML,CSS,JS之间的关系就是:

HTML进行初步的布局,主要代码
CSS就是通过HTML里的class或id标签来对其样子进行更改(颜色,大小,背景,间距…)
JS就是通过一些触发条件来动态替换/改变CSS给HTML配置的值

(2)阅读ihower的一篇博文

你需要大概了解项目里assets文件到底在做什么:

去读这篇博文:ihower Assets Pipeline
带着目的去读,只需要知道,application.js 和 application.scss下面这两段代码在干嘛,后面的工作就会进行的很顺利了

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap/alert
//= require bootstrap/dropdown
//= require_tree .

application.scss

 *= require_tree .

 *= require_self

 *= require font-awesome

 *= require twitter/bootstrap

 */



@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

我的理解:

  • application.js里像//=require jquery这样的代码就是 在很多template的html代码中下面这样的代码
    <!-- jQuery -->
    <script src="vendor/jquery/jquery.js"></script>
    
    
    

    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>



    只不过,网上的template一般是放在html中,我们一般会以在application.js以//=require jquery这样的形式添加到项目中去。
    • application.scss也是同理
    • 同时还要注意ihower博文对require_tree的解释,这个也有助于你对模版的使用

    (3)正式开始

    1.起点

    其实,走了这么一遭以后,我最终发现最简洁明了的起点就是 Nic老师的直播中用的demo
    跟着Nic老师从Step1做到Step4,这里有一个最大的好处就是
    对页面的整体有一个非常清晰的划分

    总共就分四大块,navbar, head, content,foot
    而每一块的css代码也与之对应
    navbar 对应的是 navbar的css
    welcome/index第一段 对应的是 box的css
    后面三个section 对应的是 content的css
    foot 对应的是 foot的css

    注意这个思路非常重要,在后面的整个过程中,我们尽量不要像我之前的Shit1~Shit4一样,去快速的把整个模版搬过来
    因为,这有一个致命的缺点就是,在你啥也不知道的情况下,一下塞给你如此庞大的代码,你是难以把html与相应的css,js对应过气来的,这样在后面进行改动的过程就中就会跟我一样掉进一个大屎坑:不知道接下来该怎么改…

    所以,这个就是我选择Nic老师的直播Demo作为开始的原因,代码简单,清晰,且花一点时间,看一看四块对应的css代码,其实相当好懂,无非就是改颜色,大小,间距什么的。

    注意:
    Nic老师的直播Demo确实比教程里的好很多,但不代表不需要做教程,教程里的内容是告诉你,一些常见的自定义的方法,不过,在做完教程的内容后,我还是建议使用git,checkout回原点,单开一个分支,使用Nic老师的直播Demo作为魔改的开始。

    2.自定义

    接下来:
    就是自定义的节奏了,主要两种方式

    方式一:

    CodePen(不得不说陈慧娟学姐推荐的好)
    这个网站相当不错,你可以一个功能一个功能的找代码,
    比如你要自定义导航栏,你就搜索navbar,选择一个你喜欢的,点开后就是下面这样

    这里的巨大好处就是,一般情况下不会出现大段的代码,同时你也很明确的能知道,这一段HTML代码,与这一段CSS代码和JS代码是相关的,你要做的就是把HTML代码拷贝到你项目中导航栏的位置(如_navbar.html.erb),而CSS代码拷贝到application.css中去,JS代码拷贝到application.js中去
    这里要注意:

    1. 当你把这三段代码拷贝到项目文件中去的时候,
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便
      • 应该分别打上同样的注释文字,这样将来查找和更改,会相当方便 (重要的事情说三遍)
    2. 当你从网站上拷贝了多个不同的功能后,会出现一种情况就是,因为每个功能的作者不同,其CSS的某些标签名会重名,从而导致一些冲突,如果发现某两个功能的代码冲突,记得查看一下,也许是重名造成的。
    方式二:

    在你熟悉了第一种以后,就可以开始尝试,从真实的网站上,抓一些功能下来了

    1. 当在inspect界面找到你想的代码块的时候,在其上点击鼠标右键,并选择红色框框的Edit as HTML可以得到类似下面这样的内容
      复制并粘贴到你自己的项目中去
    2. 注意上面的大图,右边都是css代码 首先你要注意紫色框框蓝色框框
      • 紫色框框下面对应的css代码就是最直接影响你复制的这段html代码排布的css代码,一般情况下,我们都住要关注,并拷贝这一部分的内容
      • 蓝色框框写的是inherited from xxx 代表它的样式还受到把其外侧(也就是把其包在里面)的其他标签元素配置的影响,可以适当的拷贝一些,开始的时候,如果弄不清楚,甚至可以展示忽略,有问题了再慢慢调

    注意:
    这里,我要强调的一点是,绝对不要大段的从上面拷贝代码
    一定要一个功能一个功能的来拷贝,目的是把html与其相应的css与js代码对应起来,并加上必要的注释
    这一点相当重要,目的就是减少你的认知负担,以免像我一样各种蒙圈

    你只要按着这个逻辑,一小段,一小段的进行功能或区域的叠加,一点一点的把Nic老师的内容替换掉,且依旧像Nic老师的Demo一样保持分块明确,就不会有什么大的问题,顶多就是吃一些小屎,琢磨琢磨就能解决,至少还能有点头绪。
    切记,不要贪多,想一口吃一个大胖子,屎一样的教训啊....

    总结一下

    避免完美主义 + 适当的营销 + 一个功能一功能的做,不要大段拷贝代码

    安利

    好了,该安利一下我自己的产品了,两天时间,做了一个首页,还是感觉相当满意的。
    动态navbar


    轮播

    内嵌视频

    点我->点我->点我->面向女程序员的招聘网站<-点我<-点我<-点我

    欢迎大家围观,吐槽,并提出宝贵意见,哈哈

    点我->点我->点我->面向女程序员的招聘网站<-点我<-点我<-点我

ORID - 2017.4.19

Objective (客观描述事实)

魔改在尝试了4种方法

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 异常紧张+异常兴奋
  • 今天的高峰是什么?
    • 终于找到了合适的启动节奏,看着自己一步一步的做出自己都想不到的效果
  • 今天的低点是什么?
    • 等到0点上传自己的作品后,发现有一个哥们上传了一个完整的作品,“感觉还没开始,就已经结束”这句话完全的形容了我当时的心境
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • 解决了collapse与轮播的冲突
    • 看了一篇ihower的教程,了解了assets下js与css文件的大概用法
    • 解决了从后台跳转首页后js效果失效的bug
    • 发现之前学的基本的css与html基础在魔改大赛里起了很大的作用
  • 今天的一个重要的领悟是什么?

    • 稳住,保持自己的节奏最合适
Decision (决定下一步的行动)
  • 该写一点技术相关的博客了

ORID - 2017.4.18

Objective (客观描述事实)

准备魔改大赛,尝试了三种方法,都不太理想

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 异常紧张
  • 今天的高峰是什么?
    • 发现有好多好看的网站,好看的模版啊
  • 今天的低点是什么?
    • 如此多好看的模版只要涉及到有js内容的,我完全傻眼
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • collapse可以结合点击图片,下面折叠出文字
    • grep -r "搜索内容"在长期输入rails s 的窗口中进行报错信息搜索
    • css中,margin:auto可以让图片根据浏览器尺寸随意放大缩小
    • css@media大概是要加限制条件
    • a ||= b相当于a || a = b
    • 知道了搜索要用的gem:ransack,图片尺寸大小调节用mini-magick
    • table-striped是导致表哥灰白相间
    • login写成了signin
    • 本地看到的效果与上传到heroku竟然不一样…服了
  • 今天的一个重要的领悟是什么?

    • 不论你怎么异想天开,至少目前为止,我肯定是卡在技术瓶颈上
Decision (决定下一步的行动)

除了加油干...还能怎么办

ORID - 2017.4.17

Objective (客观描述事实)

Job-Listing第二周内容写了一遍
听了陈惠娟的分享
听了Nic助教的直播
简单分析了第一届魔改大赛的作品

Reflective (主观描述感想)
  • 你要如何形容今天的情绪?
    • 非常兴奋
  • 今天的高峰是什么?
    • Nic老师宣布20号即将开始有2天时间准备,高潮了...
  • 今天的低点是什么?
    • 狂扫了两本外山滋比古的书,完全没有我想要的内容,不过值得庆幸并没有浪费很多时间
Interpretative (分析寻找意义何在)
  • 今天学到了什么?

    • 对不少之前的热门作品与博客进行汇总分析得出几个关键点
      • 过度完美主义,导致曝光太晚
      • 模仿成熟作品,来的更快
      • 营销相当重要
      • 可适当结合一点项目管理的内容
      • 文案先行+点子要好+代码还行
  • 今天的一个重要的领悟是什么?

    • 防止自己过度完美主义,先走起再说。
Decision (决定下一步的行动)
  • 继续分析之前热门作者的学习轨迹
  • 争取提前做出一个可拿出来看的作品