字体加载逻辑优化

bookshelfplus-frontend/public/assets/stylesheets/style.css

@@ -71,6 +71,13 @@ hr {
 .siteTitle h1 {
   margin-top: 130px;
   font-size: 36px;
+  transition: 0.3s;
+  cursor: default;
+  display: inline-block;
+  user-select: none;
+}
+.siteTitle h1:hover {
+  transform: scale(1.2);
 }
 
 .siteTitle span {
@@ -101,18 +108,26 @@ hr {
   padding: 0 10px;
   width: 300px;
   width: min(70vw, 280px);
-  height: 42px;
+  height: 30px;
   margin-top: 30px;
   margin-bottom: 5px;
 
-  transition: 0.5s;
-}
+  transition: 0.3s;
 
+  border: none;
+  border-bottom: 1px solid #ccc;
+  padding: 0.5em;
+  font-size: 1em;
+  outline: none;
+}
 
 .searchBox #searchInput:focus {
   padding: 0 18px;
   height: 35px;
   width: min(78vw, 300px);
+
+  border: 1px solid rgb(133, 133, 133);
+  border-radius: 3px;
 }
 
 .searchBox #searchButton {
@@ -139,10 +154,12 @@ hr {
 
   margin-left: 10px;
   transition: 0.25s;
+
+  margin-bottom: 3px;
 }
 
 .searchBox #searchButton:hover {
-  background-color: #000;
+  background-color: rgb(39, 39, 39);
   color: #fff;
 }
 

bookshelfplus-frontend/views/category.html

@@ -8,7 +8,7 @@
     <main class="main">
         <h1><%= title %></h1>
         <div id="container">
-            <a href="./book">书本详情页</a>
+            <!-- <a href="./book">书本详情页</a> -->
         </div>
     </main>
     <%- include("./component/footer.html"); %>

bookshelfplus-frontend/views/component/footer.html

@@ -30,23 +30,36 @@
         axios.post('../fontmin/getfont', { text: text, font: "" })
             .then(function (response) {
                 // 当接口成功返回时，动态设置css
-                let styleDom = document.createElement('style');
-                styleDom.type = 'text/css';
-                const cssText = `
-                @font-face {
-                    font-family: bookshelfplusFont;
-                    src: url("${response.data.url}") format("truetype");
-                }
-                `
-                styleDom.appendChild(document.createTextNode(cssText));
-                document.getElementsByTagName('head')[0].appendChild(styleDom)
-                console.log("字体加载成功");
+                loadFont(response.data.url);
+                $("html,body").css("transition", ".05s");
+                setTimeout(()=>{
+                    $("html,body").css("opacity", "1");
+                }, 100)
             })
             .catch(function (error) {
                 console.log("字体加载失败", error);
+                $("html,body").css("transition", ".05s");
+                setTimeout(()=>{
+                    $("html,body").css("opacity", "1");
+                }, 100)
             });
     }
 
+    function loadFont(fontUrl) {
+        let styleDom = document.createElement('style');
+        styleDom.type = 'text/css';
+        const cssText = `
+        @font-face {
+            font-family: bookshelfplusFont;
+            src: url("${fontUrl}") format("truetype");
+        }
+        `
+        styleDom.appendChild(document.createTextNode(cssText));
+        document.getElementsByTagName('head')[0].appendChild(styleDom)
+        console.log("字体加载成功");
+    }
+
+
     $(document).ready(function () {
         var allText = getPageText();
         // console.log(allText);

bookshelfplus-frontend/views/component/header.html

@@ -16,4 +16,7 @@
 
     // 请求头 Content-Type
     axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+    // 字体加载前先隐藏，不然文字会闪一下
+    $("html,body").css("opacity", "0");
 </script>

bookshelfplus-frontend/views/component/navbar.html

@@ -8,8 +8,8 @@
         </div>
         <div class="grid-item exnarrowHide" style="text-align: right; color: white;">
             <a class="narrowHide" href="/">首页</a>
-            <a href="/category">分类</a>
             <a href="/search">搜索</a>
+            <a href="/category">分类</a>
             <a class="narrowHide" href="/about">关于</a>
         </div>
         <div class="grid-item"></div>