2.1K Followers
·
Follow

想要高質感網站,需要了解的網頁安全字體 Web Safe Font

Image for post
Image for post
中文-網頁安全字體 Web Safe Font(Chinese)

字體,是網頁排版中最重要的元素之一,中文字體由於先天上的諸多限制,開發者都在追求網頁在各種作業系統下都能顯示其最佳字型。所以在設計時會採用「網頁安全字體 web safe font」(也有人稱為generic-family 通用字),因為安全字體是最有可能在跨系統上使用的字體,用戶能看到期望所看到的設計。

在CSS設定字體時,所有中文字型都有對應的英文名字,建議使用英文名字設定會比中文來得更準確。以下資料轉載自 Ja 網頁

Mac OS

  • 華文細黑:STHeiti Light [STXihei]
  • 華文黑體:STHeiti
  • 華文楷體:STKaiti
  • 華文宋體:STSong
  • 華文仿宋:STFangsong
  • 儷黑 Pro:LiHei Pro Medium
  • 儷宋 Pro:LiSong Pro Light
  • 標楷體:BiauKai
  • 蘋果儷中黑:Apple LiGothic Medium
  • 蘋果儷細宋:Apple LiSung Light

Windows:

  • 新細明體:PMingLiU
  • 細明體:MingLiU
  • 標楷體:DFKai-SB
  • 黑體:SimHei
  • 宋體:SimSun
  • 新宋體:NSimSun
  • 仿宋:FangSong
  • 楷體:KaiTi
  • 仿宋_GB2312:FangSong_GB2312
  • 楷體_GB2312:KaiTi_GB2312
  • 微軟正黑體:Microsoft JhengHei
  • 微軟雅黑體:Microsoft YaHei

字型屬性:

  • serif(襯線字)
  • sans-serif(無襯線字)
  • cursive(類手寫字)
  • fantasy(裝飾字)
  • monospace(等寬字)

網頁安全字體 Web Safe Font

Image for post
Image for post
Web Safe Font — win7 , mac os

為了讓用戶看到設計者想要的字體,必須在電腦上提供適當的字體。從遠古時代的網站打開樣式表(css style sheet),則可能只會找到ArialGeorgiaTimes New RomanTrebuchet MS Verdana。這些字體是最有可能在電腦上使用的字體,因此它們被認為是“網頁安全字體 web safe font”,因為用戶能看到期望所看到的設計。

網頁字體 Web Font

對應網頁安全字體,其實並沒有危險字體,只有不支援字體

Image for post
Image for post
對應網頁安全字體,其實並沒有危險字體,只有不支援字體

由於字體排版非常重要,設計師應該慶祝現在網頁技術的進步。因為現在我們對字體有很多選擇,針對不同客戶/產品風格而挑選最合適的字體,而不必依賴曾經限於的相同的老土網絡安全字體。

網頁字體(web font)沒有像網頁安全字體(web safe font)那樣預先安裝在用戶系統上。它們的來源來自網絡,因此每個用戶都可以下載并在頁面上看到所需的字體。這些字體在瀏覧網頁時由下載,然後套用到網頁樣式(css style)。

Reference:

https://blog.user.today/chinese-webfont-note/

https://www.cnblogs.com/qianduanjingying/p/5362903.html

https://www.oxxostudio.tw/articles/201811/css-font-family.html

https://blog.ja-anything.com/2016/11/25/css-%E5%B8%B8%E7%94%A8%E4%B8%AD%E6%96%87%E5%AD%97%E5%9E%8B-traditional-chinese-font-family/

https://www.wfublog.com/2014/02/font-family-chinese-cross-platform.html


This is a parse-server project, with default config for dashboard, graphQL and vue(SPA not nuxt). Helping you to setup everything within a minute.

demo

vue-spa

http://localhost:8081/#/secret (dev) or http://localhost:1337/#/secret (prod)

Image for post

parse dashboard

http://localhost:1337/dashboard/login

Image for post
Image for post

parse graphql playground

http://localhost:1337/playground/

Image for post
Image for post

1.1 Project setup

yarn

1.2 Config Setup

setup your env

#  parse-server 
echo "set DATABASE_URI"
export DATABASE_URI="mongodb://username:password@something.mlab.com:45380/something"
echo "set APP_ID"
export APP_ID="YOUTUB_APPLICATION_ID"
echo "set MASTER_KEY"
export MASTER_KEY="YOUTUB_MASTER_KEY"
# s3-config for file upload
echo "set S3_ACCESS_KEY"
export S3_ACCESS_KEY="YOU_S3_ACCESS_KEY"
echo "set S3_SECRET_KEY"
export S3_SECRET_KEY="YOU_S3_SECRET_KEY"
echo "set S3_REGION"
export S3_REGION="ap-northeast-1"
echo "set S3_BUCKET"
export S3_BUCKET="bucketn-ame"
# dashboard setup
echo "set PARSE_DASHBOARD_APP_ID"
export PARSE_DASHBOARD_APP_ID=$APP_ID
echo "set PARSE_DASHBOARD_MASTER_KEY"
export PARSE_DASHBOARD_MASTER_KEY=$MASTER_KEY
echo "set PARSE_DASHBOARD_SERVER_URL"
export PARSE_DASHBOARD_SERVER_URL="http://localhost:1337/parse"
echo "set PARSE_DASHBOARD_APP_NAME"
export PARSE_DASHBOARD_APP_NAME="MyApp"
echo "set PARSE_DASHBOARD_USER_ID"
export PARSE_DASHBOARD_USER_ID="yourDashboardUsername"
echo "set PARSE_DASHBOARD_USER_PASSWORD"
export…


Image for post
Image for post
了解和實現Viola-Jones圖像分類算法

本文章翻譯自 Anmol Parande

在過去的十年中,圖像分類(Image classification)一直是一個快速增長的領域,並且神經網絡(CNN)和其他深度學習技術的使用正在迅速增長。但是,在CNN成為主流之前,另一種技術已被廣泛使用並繼續使用:Viola-Jones。

CNN是單個分類器,它查看完整圖像並應用矩陣運算來進行分類,而 Viola-Jones 採用整體方法。這意味著 Viola-Jones 使用許多不同的分類器,每個分類器查看圖像的不同部分。每個單獨的分類器都比最終分類器弱(準確度低,產生更多的誤報等),因為它吸收的信息較少。但是,將每個分類器的結果合併後,它們會產生一個強大的分類器。

Image for post
Image for post
將每個分類器的結果合併後,它們會產生一個強大的分類器

由於算法的性質,Viola-Jones方法僅限於二進制分類任務(例如 Object Detection),並且訓練週期非常長。但是,由於每個弱分類器僅需要少量參數,並且具有足夠數量的弱分類器,因此誤分類率很低,因此可以對圖像進行快速分類。

功能和整體形象

介紹Viola-Jones論文中做出的第一個主要貢獻是在圖像識別中使用了一組簡單的功能。在大多數任務中,像素值是輸入到算法中的特徵。但是,Viola和Jones引入了以下新功能。

Image for post
Image for post
A和B是兩個矩形特徵,C是三個矩形特徵,D是一個4個矩形特徵。圖片取自原始論文

從陰影矩形中的像素總和中減去未陰影矩形中的像素總和。很容易看出,即使是小圖像,也有很多功能(24 x 24圖像超過160,000)。由於算法要求迭代所有特徵,因此必須非常有效地計算它們。為了做到這一點,Viola 和 Jones 介紹了完整的形象。積分圖像由以下遞歸關係定義。

Image for post
Image for post

s(x,y)是點(x,y)處的累積行總和,ii(x,y)是同一點處的積分圖像值,而i(x,y)是該點處的像素值。這種關係表示的是,在點(x,y)處的積分圖像是當前像素上方和左側所有像素的總和。如下所示,這使得計算矩形區域中的像素總和變得容易。

Image for post
Image for post

區域D中的像素之和為 ii(4)+ ii(1) - ii(2)- ii(3),僅是四個陣列參考。讓我們通過創建一個輔助函數來開始實現該算法,該函數在給定圖像(表示為2D numpy數組)的情況下計算積分圖像。

import numpy as np #Don't forget to import numpydef integral_image(image):
ii = np.zeros(image.shape) …

About

Peter Chang

Algorithm Artist and tech blogger from Macau, Co-Funder of golding.cc. ex @yahoo worker. https://www.linkedin.com/in/waheng

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store