Protogalaxy

Planet #0

Hybrid前端框架开发日志#2-字体及排版相关模块及一些工具

开发日志

经过了蛮长时间停停走走的开发，终于是基本完成了字体定义模块及一些工具和一部分文本相关的排版模块。

嘛，个人喜好使然，选择了基于思源黑体(Noto Sans, Source Han Sans)的Font-Family，在搜索的时候还意外的发现了Google开始尝试着为非英语语种提供web font服务，比如CJK以及其他一些书写复杂的语种，所以字体定义全部采用了Google Fonts的API，正式完成之后，还可能加入阿里的思源黑体web font API，具体细节如下：

.recommend-Font-Family {
  font-family : "Noto Sans", "Helvetica Neue", "Noto Sans SC", "PingFangSC", "Noto Sans Japanese", "sans-serif";
}

@mixin recommend-Font-Family {
  font-family : "Noto Sans", "Helvetica Neue", "Noto Sans SC", "PingFangSC", "Noto Sans Japanese", "sans-serif";
}

为了更好的，更加细致的控制多语言下的字体显示效果，字体定义采用了unicode-range属性对各种语言进行了区分以保证英语，中文，日语这种多语言显示环境下的效果。以上林林总总的加起来字体定义模块写了大概450行_(:3」∠)_，本着框架的开放准则，把字体模块独立了起来，可以让用户选择是否加载。

经过了一通搜索以及思考，终于是完成了以前未完成的背景模糊功能，大体上的实现方法和我之前尝试的差不多也是使用了CSS3的Filter新功能及其blur滤镜进行背景的高斯模糊，不过并不是对要使用模糊背景的本元素定义CSS，而是使用:before选择器以及对z-index属性进行定义实现模糊背景的添加，由于框架全面采用了SCSS，所以我把这个功能写成了mixin的形式供用户选择性使用，具体代码如下：

@mixin backound-image-blur($URL,$BLUR) {
  body:before {
    content          : '';
    background-image : url($URL);
    background-size  : cover;
    position         : fixed;
    -webkit-filter   : blur($BLUR);
    filter           : blur($BLUR);
    width            : 100%;
    height           : 100%;
    left             : 0;
    right            : 0;
    z-index          : -1;
  }
}

由于懒癌发作╮(╯-╰)╭，相关文字排版只写了一小部分，只对h1-h6与article，p元素进行了编写，所以相关的东西留到下次再说，以上。

发表评论