中英夾雜&Glyphicon混用

造 printing 同 web design 最大嘅分別在於 web 嘅最壞閱讀環境在於低網速細屏幕嘅手机，以 mobile-first 開始設計，所以 file size 應該盡量降低，版面傾向簡洁。網頁係漸進式咁 load，應該优化到由 CSS > web font > jquery.js > HTML > js > image 嘅优先次序減小等候時間同避免走位，所以用 font 比 image 更加要緊謹。用 web font 可以令唔同 OS 嘅字款變得一致，最好由 Google Fonts 攞小量黎用；但中文因為 size 太大，同 Emoji 一樣每每超過 10MB，都要靠 OS 內置提供，尤是 Emoji 嘅款式喺 Google, Apple, Microsoft, Samsung 唔同環境之下都有好大差異。

因為主流 OS 包括嘅 default 中文字款都係黑体，Windows Vista 之後用嘅 “正黑” ，相當於舊一代 “雅黑” 嘅幼線條版。如果要造到手机嘅可讀性同雜誌一樣，我會將 font size 定喺 19px，比起一般中文網頁要大得多，適合用 “雅黑” ，喺 font size 細時改用 simsun 效果最理想。中文字加大嘅同時，英文應該縮細番，只能夠由 Google Fonts 揾相對細嘅例如 Federo 取代 yaHei 中嘅 Latin 字符，只要喺 CSS 中 @font-face include 左之後，再寫成 font-family: 'Federo', 'microsoft yaHei', sans-serif; 就可以。

Glyphicon 係 web font 嘅一種但全部都係 icon，Wordpress 入面內置左 dashicons 作為 UI 之用，而 FontAwesome 係最普遍嘅 glyphicon，應該盡可能用最普及嘅免費版，version 6 有超過一千個 icon 應該夠用，加上 shim 去兼容 version 4，font 同 CSS 都應該由 CDN 度攞避免重覆，有利 disk cache。我將所有要用嘅 js 同 css library 嘅 CDN url 放到一個 json file，可以透過 PHP 或者 javascript 讀取，方便定期 update version。喺 WordPress theme 入面嘅 functions.php 可以預先 register 定所有要用嘅 lbrary 或者改為 CDN source 例如 cdnjs，on demand include 黎用，同時應該清理各 plug in 有可能內置左自己一套 library 造成重復。另外，Wordpress 嘅中文撮要 excerpt 字数有数錯嘅問題，需要透過 filter 功能轉用 mb_substr 加以修正。

<?php
//*******************************************************************************************
// include assets
//*******************************************************************************************
$CDN = json_decode(file_get_contents('http://chanchunghoi.com/cdn/cdn.json'));
if (is_object($CDN)) {
    add_action('init', 'child_theme_register_custom_scripts', 11);
    add_action('admin_init', 'child_theme_register_custom_scripts', 11);
    add_filter('icon_picker_icon_type_stylesheet_uri', 'font_awesome_css_from_cdn', 10, 3);
}
function child_theme_register_custom_scripts() {
    global $CDN;
    wp_register_style('hoi-common', $CDN->hoi_common, array('font-awesome', 'google-fonts'), null);
    wp_register_style('google-fonts', $CDN->google_fonts, array(), null);
    wp_register_style('font-awesome-4', $CDN->font_awesone_4, array(), null);
    wp_register_style('font-awesome-5', $CDN->font_awesome, array('font-awesome-4'), null);
    wp_register_style('themeisle-gutenberg-menu-icons-font-awesome', $CDN->font_awesome, array('font-awesome-4'), null);
    wp_register_style('font-awesome', $CDN->font_awesome, array('font-awesome-4'), null);
    wp_register_style('open-sans', $CDN->open_sans, array(), null);
    wp_register_style('animate', $CDN->animate, array(), null);
    wp_register_script('waypoints', $CDN->waypoints, array('jquery'), null, true);
    wp_register_script('chartjs', $CDN->chartjs, array('jquery'), null, true);
    wp_register_script('reel', $CDN->reel, array('jquery'), null, true);
    wp_register_script('imagemapster', $CDN->imagemapster, array('jquery'), null, true);
    Su_Assets::register(); // shortcode utimate
}
function font_awesome_css_from_cdn($stylesheet_uri, $icon_type_id, $icon_type) {
    if ('fa' === $icon_type_id) {
        global $CDN;
        $stylesheet_uri = $CDN->font_awesome;
    }
    return $stylesheet_uri;
}
//*******************************************************************************************
// setup
//*******************************************************************************************
add_action('wp_enqueue_scripts', 'child_theme_frontend_enqueue_script', 11);
function child_theme_frontend_enqueue_script() {
    wp_enqueue_style('astra-galleries-css', array(), null);
    wp_enqueue_style('child-theme-title-google-fonts', '//fonts.googleapis.com/css?family=Codystar:300&text=3DESIGRAMMER', array(), null);
    wp_enqueue_style('hoi-common');
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/css/child-style-astra.css', array('font-awesome', 'google-fonts', 'animate'), null);
    wp_enqueue_script('child-theme-script', get_stylesheet_directory_uri() . '/js/child-script.js', array('jquery', 'waypoints'), '', true);
}
add_action('admin_enqueue_scripts', 'child_theme_admin_enqueue_scripts', 11);
function child_theme_admin_enqueue_scripts() {
    wp_enqueue_style('hoi-common');
    wp_enqueue_style('child-style-admin-editor', get_stylesheet_directory_uri() . '/css/child-style-admin-editor.css');
}
add_action('init', 'global_setup_image_size');
function global_setup_image_size() {
    if (get_option('thumbnail_size_w') != 160) {
        update_option('thumbnail_size_w', 160);
        update_option('thumbnail_size_h', 160);
        update_option('thumbnail_crop', 1);
    }
    if (get_option('medium_size_w') != 320) {
        update_option('medium_size_w', 320);
        update_option('medium_size_h', 320);
        update_option('medium_crop', 0);
    }
    if (get_option('medium_large_size_w') != 640) {
        update_option('medium_large_size_w', 640);
        update_option('medium_large_size_h', 640);
        update_option('medium_large_crop', 0);
    }
    if (get_option('large_size_w') != 640) {
        update_option('large_size_w', 640);
        update_option('large_size_h', 640);
        update_option('large_crop', 0);
    }
}
//*******************************************************************************************
// excerpt
//*******************************************************************************************
$custom_excerpt_length = 160;
add_action('after_setup_theme', 'custom_excerpt');
function custom_excerpt() {
    remove_filter('the_excerpt', 'wp_trim_excerpt');
    add_filter('the_excerpt', 'custom_trim_excerpt');
}
function custom_trim_excerpt() {
    global $custom_excerpt_length;
    $text = get_the_excerpt();
    $text = str_replace('&nbsp;', '', $text);
    $text = strip_tags($text);
    if (strlen($text) != 0) {
        $excerpt = mb_substr($text, 0, $custom_excerpt_length);
        return $excerpt . custom_excerpt_more();
    } else {
        return;
    }
}
function custom_excerpt_more() {
    global $post;
    return '<a class="hoi1115e" href="' . get_permalink($post->ID) . '">' . ' ......' . '</a>';
}
//*******************************************************************************************
// cleanup
//*******************************************************************************************
add_action('admin_menu', 'global_cleanup_default_dashboard_widgets');
function global_cleanup_default_dashboard_widgets() {
    remove_action('welcome_panel', 'wp_welcome_panel');
    remove_meta_box('dashboard_right_now', 'dashboard', 'normal');
    remove_meta_box('welcome-panel', 'dashboard', 'normal');
    remove_meta_box('dashboard_activity', 'dashboard', 'normal');
    remove_meta_box('dashboard_quick_press', 'dashboard', 'normal');
    remove_meta_box('dashboard_primary', 'dashboard', 'normal');
}
// add to admin bar
add_action('wp_before_admin_bar_render', 'admin_bar_mod', 999);
// admin bar queries
function admin_bar_mod() {
    if (!is_super_admin()) return;
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');
    $wp_admin_bar->remove_menu('updraft_admin_node');
    $wp_admin_bar->remove_menu('new-content');
    $wp_admin_bar->remove_menu('search');
    $wp_admin_bar->remove_menu('tm-suspend');
    $wp_admin_bar->remove_menu('customize');
    $wp_admin_bar->remove_menu('notes');
    $wp_admin_bar->remove_menu('menus');
    $wp_admin_bar->remove_menu('themes');
    $wp_admin_bar->remove_menu('widgets');
    $wp_admin_bar->remove_menu('jetpack-protect');
}
add_filter('admin_bar_menu', 'remove_howdy', 25);
function remove_howdy($wp_admin_bar) {
    $my_account = $wp_admin_bar->get_node('my-account');
    $newtitle = str_replace('Howdy,', '', $my_account->title);
    $wp_admin_bar->add_node(array(
        'id' => 'my-account',
        'title' => $newtitle,
    ));
}
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'rest_output_link_wp_head', 10);
remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);
remove_action('template_redirect', 'rest_output_link_header', 11, 0);
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_filter('the_content_feed', 'wp_staticize_emoji');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_filter('comment_text_rss', 'wp_staticize_emoji');
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

Icon 可以取代文字解決番釋嘅問題，尤其是喺 UI 中相當重要。Web 2.0 例如二手交易或者書評網站上面比評分啲星都係 glyphicon，我認為 default 同中性嘅 OK 表達比無星更合理，例如：，用 FontAwesome 就係  。只要唔攝及商業利益，同時收集正評同負評可以取代推介同投数介面，亦可以作為個人 bookmark 同黑名單之用。從管理立場，大数嘅公眾評價係重要嘅生態大復取代評審同監管工作，又可以了解到個別用戶心態。

一般 font 用 px 造單位，但唔係真正對番幾高 pixel，一般係 16px 對換 12pt。我用 FontCreator 用 grid 畫 font，可以 set 到 100 對 1 grid，真正造到 pixel to pixel 嘅 font，只要 set 1em 就相當於 100% 無 scale 到造到最 sharp 嘅效果。我制作左一套 7 segment LED 数字 font：

0123456789:.

同一套專為寫 code 而設 5*7 pixel 特別細 size 嘅 monospace font，ttf 適合 windows 用，而且可以 edit； woff2 係壓縮版適合作為 web font 用：

Reference: