Skip to content

Commit

Permalink
feat: register chinese font
Browse files Browse the repository at this point in the history
  • Loading branch information
@korbinzhao
korbinzhao committed Jul 4, 2023
1 parent 213e499 commit b420188
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 164 deletions.
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ A whiteboard supporting Chinese hand draw effect and multi-canvas based on excal
![](https://img.alicdn.com/imgextra/i2/O1CN01rOeDDY1sPDO58CLLB_!!6000000005758-2-tps-546-438.png) ![](https://img.alicdn.com/imgextra/i1/O1CN01yfRQ6w1ijEXfHX91Z_!!6000000004448-2-tps-744-452.png)

#### Windows 系统中文手写效果
MacOS 系统和 Windows 系统下中文手写字体不同，前文展示效果为 MacOS 效果，这里的展示效果为 Windows 效果。
![image](https://github.com/korbinzhao/excalidraw-cn/assets/5051627/cd73fb34-2957-4a58-a533-98abb21162ab)

MacOS 系统和 Windows 系统下中文手写字体不同，前文展示效果为 MacOS 效果，这里的展示效果为 Windows 效果。 ![image](https://github.com/korbinzhao/excalidraw-cn/assets/5051627/cd73fb34-2957-4a58-a533-98abb21162ab)

#### Multiple Canvas 多画布能力

Expand Down
368 changes: 209 additions & 159 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Handraw | 中文友好的手写效果白板工具</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
/>
<meta name="referrer" content="origin" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#121212" />

<!-- Primary Meta Tags -->
<meta
name="title"
content="Excalidraw — Collaborative whiteboarding made easy"
/>
<meta
name="description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
/>
<meta name="image" content="https://excalidraw.com/og-general-v1.png" />

<!-- Open Graph / Facebook -->
<meta property="og:site_name" content="Excalidraw" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://excalidraw.com" />
<meta
property="og:title"
content="Excalidraw — Collaborative whiteboarding made easy"
/>
<meta property="og:image:alt" content="Excalidraw logo" />
<meta
property="og:description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
/>
<meta property="og:image" content="https://excalidraw.com/og-fb-v1.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@excalidraw" />
<meta property="twitter:url" content="https://excalidraw.com" />
<meta
property="twitter:title"
content="Excalidraw — Collaborative whiteboarding made easy"
/>
<meta
property="twitter:description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
/>
<meta
property="twitter:image"
content="https://excalidraw.com/og-twitter-v1.png"
/>

<!-- General tags -->
<meta
name="description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
/>

<!------------------------------------------------------------------------->
<!-- to minimize white flash on load when user has dark mode enabled -->
<script>
try {
//
const theme = window.localStorage.getItem("excalidraw-theme");
if (theme === "dark") {
document.documentElement.classList.add("dark");
}
} catch {}
</script>
<style>
html.dark {
background-color: #121212;
color: #fff;
}
</style>
<!------------------------------------------------------------------------->

<head>
<meta charset="utf-8" />
<title>Handraw | 中文友好的手写效果白板工具</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
<meta name="referrer" content="origin" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#121212" />

<!-- Primary Meta Tags -->
<meta name="title" content="Excalidraw — Collaborative whiteboarding made easy" />
<meta name="description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
<meta name="image" content="https://excalidraw.com/og-general-v1.png" />

<!-- Open Graph / Facebook -->
<meta property="og:site_name" content="Excalidraw" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://excalidraw.com" />
<meta property="og:title" content="Excalidraw — Collaborative whiteboarding made easy" />
<meta property="og:image:alt" content="Excalidraw logo" />
<meta property="og:description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
<meta property="og:image" content="https://excalidraw.com/og-fb-v1.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@excalidraw" />
<meta property="twitter:url" content="https://excalidraw.com" />
<meta property="twitter:title" content="Excalidraw — Collaborative whiteboarding made easy" />
<meta property="twitter:description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />
<meta property="twitter:image" content="https://excalidraw.com/og-twitter-v1.png" />

<!-- General tags -->
<meta name="description"
content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them." />

<!------------------------------------------------------------------------->
<!-- to minimize white flash on load when user has dark mode enabled -->
<script>
try {
<script>
// Redirect Excalidraw+ users which have auto-redirect enabled.
//
// Redirect only the bare root path, so link/room/library urls are not
// redirected.
//
const theme = window.localStorage.getItem("excalidraw-theme");
if (theme === "dark") {
document.documentElement.classList.add("dark");
// Putting into index.html for best performance (can't redirect on server
// due to location.hash checks).
if (
window.location.pathname === "/" &&
!window.location.hash &&
!window.location.search &&
// if its present redirect
document.cookie.includes("excplus-autoredirect=true")
) {
window.location.href = "https://app.excalidraw.com";
}
} catch { }
</script>
<style>
html.dark {
background-color: #121212;
color: #fff;
}
</style>
<!------------------------------------------------------------------------->

<script>
// Redirect Excalidraw+ users which have auto-redirect enabled.
//
// Redirect only the bare root path, so link/room/library urls are not
// redirected.
//
// Putting into index.html for best performance (can't redirect on server
// due to location.hash checks).
if (
window.location.pathname === "/" &&
!window.location.hash &&
!window.location.search &&
// if its present redirect
document.cookie.includes("excplus-autoredirect=true")
) {
window.location.href = "https://app.excalidraw.com";
}
</script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<!-- Excalidraw version -->
<meta name="version" content="{version}" />

<link rel="preload" href="Virgil.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="Cascadia.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="YeZiGongChangCangNanShouJi-2.ttf" as="font" type="font/ttf" crossorigin="anonymous">

<link rel="manifest" href="manifest.json" style="--pwacompat-splash-font: 24px Virgil" />

<link rel="stylesheet" href="fonts.css" type="text/css" />
<% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
</script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<!-- Excalidraw version -->
<meta name="version" content="{version}" />

<link
rel="preload"
href="Virgil.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="Cascadia.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="YeZiGongChangCangNanShouJi-2.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>

<link
rel="manifest"
href="manifest.json"
style="--pwacompat-splash-font: 24px Virgil"
/>

<link rel="stylesheet" href="fonts.css" type="text/css" />
<% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
<script>
{
const _WebSocket = window.WebSocket;
Expand All @@ -105,75 +148,82 @@
}
</script>
<% } %>
<script>
window.EXCALIDRAW_ASSET_PATH = "/";
// setting this so that libraries installation reuses this window tab.
window.name = "_excalidraw";
</script>
<% if (process.env.REACT_APP_DISABLE_TRACKING !=='true' && process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
<script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
</script>
<% } %>

<!-- FIXME: remove this when we update CRA (fix SW caching) -->
<style>
body,
html {
margin: 0;
-webkit-text-size-adjust: 100%;

width: 100%;
height: 100%;
overflow: hidden;
}

.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
user-select: none;
}

#root {
height: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media screen and (min-width: 1200px) {
#root {
-webkit-touch-callout: default;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
}
</style>
</head>

<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<header>
<h1 class="visually-hidden">Excalidraw</h1>
</header>
<div id="root"></div>
<iframe src="https://handraw-server.deno.dev/stastic" frameborder="0" style="visibility: hidden"></iframe>
</body>

</html>
<script>
window.EXCALIDRAW_ASSET_PATH = "/";
// setting this so that libraries installation reuses this window tab.
window.name = "_excalidraw";
</script>
<% if (process.env.REACT_APP_DISABLE_TRACKING !=='true' &&
process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
</script>
<% } %>

<!-- FIXME: remove this when we update CRA (fix SW caching) -->
<style>
body,
html {
margin: 0;
-webkit-text-size-adjust: 100%;

width: 100%;
height: 100%;
overflow: hidden;
}

.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
user-select: none;
}

#root {
height: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media screen and (min-width: 1200px) {
#root {
-webkit-touch-callout: default;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
}
</style>
</head>

<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<header>
<h1 class="visually-hidden">Excalidraw</h1>
</header>
<div id="root"></div>
<iframe
src="https://handraw-server.deno.dev/stastic"
frameborder="0"
style="visibility: hidden"
></iframe>
</body>
</html>
Loading

0 comments on commit b420188

Please sign in to comment.