Web Font Test

我擦,业务从2C转向2B之后,需要研究下web font怎么运作的.翻看了下Google Font Quick Start,核心的代码如下

  1. Link font style
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Tangerine'>
  1. Custom css selector
.font-css-test {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
 }
  1. Use css style.
<div class='font-css-test'>css style just load in detail pages. so you need click in it.</div>

Preview

"Everything around you that you call life was made up by people, & you can change it."

via Steve Jobs

The index page not load font style. plz click to preview.

Others

恰巧也研究了下Jekyll如何在子界面定义自己的样式.主要是用到了page页头部的yaml定义, 定义了两部分内容 css & style.

css: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

style: |
 <style>
 .font-css-test {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
 }
 </style>

在head.html中添加如下两行代码,把子page页面中的自定义内容引用到head上

{% if page.css %}{{ page.css | stylesheet }}{% endif %}
{% if page.style %}{{ page.style }}{% endif %}

bwt: Jekyll 高亮自身的一些方法和属性.使用raw & endraw

Posted in Jekyll with tags: WebFont, Jekyll