[CSS] Set font face to display specified font

 CSS   font-face   font-family

▌Introduction

---

Sometimes we would like to apply new font on our SPA website for better UI for end-users.

The @font-face CSS at-rule allows us to specify the online font(s) and display them on the website.

In this article, we will set the css to display globally the specified fonts by @font-face and set font-family.

▌Implement

---

▋Copy the font into Website

For example, I would like to use the PingFangTC (萍方繁體字型) -> PingFangSC (萍方簡體字型) on my website.

▋CSS

Define the location of the font inside @font-face and set font-family:

▋set-font-face.css

@font-face {

  font-family: 'PingFangTC';

  src: url("./assets/fonts/PingFang-TC/PingFangTC.ttf") format('truetype');

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: 'PingFangSC';

  src: url("./assets/fonts/PingFang-SC/PingFangSC.ttf") format('truetype');

  font-weight: normal;

  font-style: normal;

}

* {

  font-family: "Arial","PingFangTC","PingFangSC";

}

▋Import globally

<link rel="stylesheet" type="text/css" href="../set-font-face.css"  />

Or for example, import the CSS file in main.ts in Vue CLI

import './set-font-face.css';

Result:

▌Reference

---

▋CSS 網頁字型 @font-face 使用教學與範例

[Angular-ui-bootstrap] datepickerPopup and timepicker

 #AngularJS   #ui-bootstrap   #datepicker   #timepicker

▌Introduction

---

Angular-ui-bootstrap 提供了以bootstrap為主的 directives.

以下記錄其中兩個directive的實際應用。

l   datepicker-popup

l   timepicker

▌Environment

---

l   AngularJS 1.4.8

l   angular-ui-bootstrap 1.3.3

注意! 由於angular-ui-bootstrap使用了很多template html，在ui-bootstrap.js檔裡面定義了這些Html的路徑。 如果不想一個一個去更改路徑的話，可直接引用 ui-bootstrap-tpls.js 請參考：ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates)

▌Implement

---

完成畫面

▋HTML - datepickerPopup

<p class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open()">         <i class="glyphicon glyphicon-calendar"></i> </button> </span> <input type="text" class="form-control" ng-click="open()" uib-datepicker-popup ng-model="ScheduleDatetime" is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> </p>

===> 參數設定參考

其中比較重要的是datepicker-options是這個參數，它指定了要設定的格式； 可以參考 javascript的部分。

▋HTML - timepicker

<uib-timepicker ng-model="ScheduleDatetime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>

====> 參數設定參考

hour-step 和 minute-step是指定使用”上”、”下”按鈕每次累加的數字。

show-meridian： 是否顯示AM/PM； 如果為false就代表是 24小時制。

▋JS

angular.module('app', ['ui.bootstrap']) .controller('DateTimeCtrl', function ($scope) {     /*      * Datepicker      */     $scope.today = function () {         $scope.ScheduleDatetime = new Date();     };     $scope.today();         $scope.dateOptions = {         dateDisabled: disabled, //指定不能選擇星期幾，例如此例的 0 : Sunday, 6 : Saturday         formatYear: 'yy',         maxDate: new Date(2020, 5, 22), //The max day that could be selected         minDate: new Date(), //The min day that could be selected         startingDay: 1  //Starting from 1. Monday, 2. Tuesday (2) …     };     // Disable weekend selection     function disabled(data) {         var date = data.date,           mode = data.mode;         return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);     }     $scope.open = function () {         $scope.popup.opened = true;     };     $scope.popup = {         opened: false     };     /*      * Timepicker      */     $scope.ismeridian = true;     $scope.hstep = 1;     $scope.mstep = 15; });

PS. 只要指定datepickerPopup和timepicker是同一個ngModel，則angular會自動將日期和時間一起指定給這個ngModel。

最後，如果是從後端丟到前端的日期時間，例如.NET的System.DateTime，一定要在前端先轉成javascript的Date!  如下例，我先用razor帶出後端的ViewBag.defaultDatetime : System.DateTime

為了要正確顯示於前端，利用ConvertDate 這個函式，將其轉換為javascript date。

最後再用$filter顯示為 “2016-06-08 02:09:11”

l   HTML

@{      var scheduleDatetime = ViewBag.defaultDatetime == null ?      DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss") : ViewBag.defaultDatetime.ToString("yyyy/MM/dd HH:mm:ss"); } <td><label class="control-label">設定的日期時間</label></td> <td colspan="2">     <input type="text" name="ScheduleDatetime" value="{{ScheduleDatetime | date:'yyyy-MM-dd HH:mm:ss'}}" ng-init="ScheduleDatetime = ConvertDate('@scheduleDatetime')" /> </td>

l   JS

//Convert string (ex. yyyy/MM/dd HH:mm:ss) to a javascript datetime $scope.ConvertDate = function (dateStr) {         var date = new Date(dateStr);         return date; }

▌Reference

---

l   Angular-ui-bootstrap

[CSS] Font Awesome 404 issue

 CSS   Font Awesome   404 error

---

▌Background

---

開發專案中使用到Font Awesome CSS模組。 這個CSS是以自訂字型來做為CSS  content顯示的圖片。

例如下圖的上面四個按鈕，其實是Font Awesome的字型：

在未正確設定Web application時，會出現無法顯示字型和以下的404錯誤：

如果要正確顯示，必須進行以下設定。

▌Trouble shooting

▋CSS and Font

將Font Awesome的字型加入到專案，本例是置於 /font/

修改font-awesome.min.css 的字型路徑： (預設是 ‘../fonts/….’)

▋Web config

在WebConfig加入以下設定讓IIS支援MIME type : font-woff*。

<system.webServer>     <staticContent>       <remove fileExtension=".woff" />       <mimeMap fileExtension=".woff" mimeType="application/font-woff" />       <remove fileExtension=".woff2" />       <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />     </staticContent>   </system.webServer>

▌Reference

---

l   FontAwesome Fonts and Mime Types in IIS and other Web Servers