• 首页
  • 车闻

    • css字体库 http://fonts.useso.com/css?family=Arimo:400,700,400italic 这个引入非常慢 怎么办？ CSS和HTML有什么不同？

    CSS\u662f\u4ec0\u4e48?\u548cHTML\u6709\u4ec0\u4e48\u533a\u522b?

    \u4e00\u3001css\u662fCascading Style Sheets \u7684\u7f29\u5199,\u5373\u5c42\u53e0\u5f0f\u6837\u5f0f\u8868\u5355\uff0c\u5b83\u662f\u7531W3C\u534f\u4f1a\u5236\u5b9a\u5e76\u53d1\u5e03\u7684\u4e00\u4e2a\u7f51\u9875\u6392\u7248\u5f0f\u6807\u51c6,\u662f\u5bf9HTML\u8bed\u8a00\u529f\u80fd\u7684\u8865\u5145\u3002
    \u4e8c\u3001HTML\u548cCSS\u7684\u533a\u522b?
    1\u3001\u5b9a\u4e49\u4e0d\u540c\uff1a
    html\u662fHyperTextMark-upLanguage\u7684\u7f29\u5199\uff0c\u5373\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff1b
    css\u662fCascading Style Sheets \u7684\u7f29\u5199,\u5373\u5c42\u53e0\u5f0f\u6837\u5f0f\u8868\u5355\uff0c\u5b83\u662f\u7531W3C\u534f\u4f1a\u5236\u5b9a\u5e76\u53d1\u5e03\u7684\u4e00\u4e2a\u7f51\u9875\u6392\u7248\u5f0f\u6807\u51c6,\u662f\u5bf9HTML\u8bed\u8a00\u529f\u80fd\u7684\u8865\u5145\u3002
    2\u3001\u7528\u9014\u4e0d\u540c\uff1a
    html\u5219\u662f\u7528\u4e8e\u6587\u672c\u5185\u5bb9\uff0c\u5305\u62ec\u5934\u90e8\uff08Head\uff09\u3001\u4e3b\u4f53\uff08Body\uff09\u4e24\u5927\u90e8\u5206\uff0c\u5176\u4e2d\u5934\u90e8\u63cf\u8ff0\u6d4f\u89c8\u5668\u6240\u9700\u7684\u4fe1\u606f\uff0c\u800c\u4e3b\u4f53\u5219\u5305\u542b\u6240\u8981\u8bf4\u660e\u7684\u5177\u4f53\u5185\u5bb9\u3002
    css\u662f\u591a\u7528\u4e8e\u6837\u5f0f\uff0c\u4e3b\u8981\u7684\u7528\u9014\u662f\u5bf9\u7f51\u9875\u4e2d\u5b57\u4f53\u3001\u989c\u8272\u3001\u80cc\u666f\u3001\u56fe\u50cf\u53ca\u5176\u4ed6\u5404\u79cd\u5143\u7d20\u7684\u63a7\u5236,\u4f7f\u7f51\u9875\u80fd\u591f\u5b8c\u5168\u6309\u7167\u8bbe\u8ba1\u8005\u7684\u8981\u6c42\u6765\u663e\u793a\u3002
    3\u3001CSS\u8bed\u6cd5\u4e0eHTML\u8bed\u6cd5\u5b8c\u5168\u4e0d\u540c\uff1a
    HTML\u91cc\u4ee3\u7801\u662f\u529f\u80fd\u6807\u7b7e\uff0c\u5982DIV\u3001SPAN\u3001A\u94fe\u63a5\u3001em\u6807\u7b7e\u3001I\u659c\u4f53\u6807\u7b7e\u3001u\u4e0b\u5212\u7ebf\u7b49\uff0chtml\u4ee3\u7801\u8bed\u6cd5\u8303\u4f8b\uff1a\u5185\u5bb9
    CSS\u6837\u5f0f\u4ee3\u7801\u8bed\u6cd5\u662fdiv{\u6837\u5f0f\u5355\u8bcd\uff1a\u503c}
    \u4e09\u3001HTML\u548cCSS\u8054\u7cfb\uff1a
    CSS\u4e0eHTML\u76f8\u540c\u4e4b\u5904\u5728\u4e8e\uff0c\u4e24\u4e2a\u5171\u540c\u4f5c\u7528\u8ba9\u7f51\u9875\u5b9e\u73b0\u9700\u8981\u7684\u5e03\u5c40\u6837\u5f0f\u3002

    \u6269\u5c55\u8d44\u6599\uff1a
    1\u3001\u6807\u8bb0\u7b26,\u8bf4\u660e\u8be5\u6587\u4ef6\u662f\u7528\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff08\u672c\u6807\u7b7e\u7684\u4e2d\u6587\u5168\u79f0\uff09\u6765\u63cf\u8ff0\u7684,\u5b83\u662f\u6587\u4ef6\u7684\u5f00\u5934;\u800c,\u5219\u8868\u793a\u8be5\u6587\u4ef6\u7684\u7ed3\u5c3e\uff0c\u5b83\u4eec\u662f\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\u6587\u4ef6\u7684\u5f00\u59cb\u6807\u8bb0\u548c\u7ed3\u5c3e\u6807\u8bb0\u3002
    2\u3001CSS\u4e3aHTML\u6807\u8bb0\u8bed\u8a00\u63d0\u4f9b\u4e86\u4e00\u79cd\u6837\u5f0f\u63cf\u8ff0\uff0c\u5b9a\u4e49\u4e86\u5176\u4e2d\u5143\u7d20\u7684\u663e\u793a\u65b9\u5f0f\u3002CSS\u5728Web\u8bbe\u8ba1\u9886\u57df\u662f\u4e00\u4e2a\u7a81\u7834\u3002\u5229\u7528\u5b83\u53ef\u4ee5\u5b9e\u73b0\u4fee\u6539\u4e00\u4e2a\u5c0f\u7684\u6837\u5f0f\u66f4\u65b0\u4e0e\u4e4b\u76f8\u5173\u7684\u6240\u6709\u9875\u9762\u5143\u7d20\u3002
    CSS\u53ef\u4ee5\u5c06\u6837\u5f0f\u5b9a\u4e49\u5728HTML\u5143\u7d20\u7684style\u5c5e\u6027\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u5c06\u5176\u5b9a\u4e49\u5728HTML\u6587\u6863\u7684header\u90e8\u5206\uff0c\u4e5f\u53ef\u4ee5\u5c06\u6837\u5f0f\u58f0\u660e\u5728\u4e00\u4e2a\u4e13\u95e8\u7684CSS\u6587\u4ef6\u4e2d\uff0c\u4ee5\u4f9bHTML\u9875\u9762\u5f15\u7528\u3002\u603b\u4e4b\uff0cCSS\u6837\u5f0f\u8868\u53ef\u4ee5\u5c06\u6240\u6709\u7684\u6837\u5f0f\u58f0\u660e\u7edf\u4e00\u5b58\u653e\uff0c\u8fdb\u884c\u7edf\u4e00\u7ba1\u7406\u3002
    \u53c2\u8003\u8d44\u6599\uff1a\u767e\u5ea6\u767e\u79d1-HTML
    \u767e\u5ea6\u767e\u79d1-CSS

    1\u3001\u5b9a\u4e49\u4e0d\u540c
    \uff081\uff09HTML\uff08\u7ed3\u6784\uff09\uff1a\u5168\u79f0Hyper Text Markup Language\uff08\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff09\uff0c\u8be5\u8bed\u8a00\u662f\u7528\u4e8e\u5b9a\u4e49\u6587\u6863\u5185\u5bb9\u7ed3\u6784\u3002
    \uff082\uff09CSS\uff08\u5e03\u5c40\uff09\uff1a\u5168\u79f0Cascading Style Sheets \uff08\u5c42\u53e0\u6837\u5f0f\u8868\uff09\u3002

    2\u3001\u6027\u8d28\u4e0d\u540c
    HTML\u662f\u7f51\u9875\u7684\u7ed3\u6784\uff0cCSS\u662f\u7f51\u9875\u7684\u6837\u5f0f\u3002\u4f8b\u5982\u5982\u679c\u628a\u6574\u4e2a\u7f51\u9875\u6bd4\u55bb\u6210\u4e00\u4e2a\u4eba\uff0c\u90a3\u4e48HTML\u5c31\u662f\u9aa8\u5934\uff0cCSS\u5c31\u662f\u8863\u670d\u3002
    2\u3001\u529f\u80fd\u4e0d\u540c
    HTML\u529f\u80fd\uff1a
    \uff081\uff09\u8be5\u8bed\u8a00\u5199\u7684\u4ee3\u7801\u901a\u5e38\u4f1a\u88ab\u6d4f\u89c8\u5668\u89e3\u6790\u6267\u884c.
    \uff082\uff09\u8d85\u6587\u672c\uff1a\u4e0d\u6b62\u5305\u62ec\u6587\u672c\uff0c\u8fd8\u6709\u56fe\u7247\u3001\u94fe\u63a5\u3001\u97f3\u4e50\u3002
    \uff083\uff09\u4e00\u4e2a\u9875\u9762\u5c31\u662f\u4e00\u7bc7\u6587\u6863\uff0c\u800c\u4e00\u7bc7\u6587\u6863\u6700\u6838\u5fc3\u7684\u5c31\u662f\u5185\u5bb9\uff0c\u4e0d\u540c\u542b\u4e49\u3002
    CSS\u529f\u80fd\uff1a
    \uff081\uff09\u7528\u4e8e\u5b9a\u4e49HTML\u6587\u6863\u7684\u6837\u5f0f\uff08\u5916\u89c2\uff09\u3002
    \uff082\uff09\u9875\u9762\u8868\u73b0\u7684\u57fa\u7840\uff0c\u53ef\u4ee5\u63a7\u5236\u5e03\u5c40\uff0c\u63a7\u5236\u5143\u7d20\u7684\u6e32\u67d3\u3002
    4\u3001\u683c\u5f0f\u4e0d\u540c
    \uff081\uff09HTML\u6ce8\u91ca\u683c\u5f0f\uff1a\u3000\u3000
    \uff082\uff09CSS\u6ce8\u91ca\u683c\u5f0f\uff1a/*\u6ce8\u91ca\u5185\u5bb9*/
    \u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1\u2014HTML
    \u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1\u2014CSS

    我今天也遇到了这个问题，最后发现是因为站点更新了。现在你可以访问这个网站找到需要的文件了。

    fonts.googleapis.com

    一种办法是用这个域名代替你原来的字体库地址；

    另一种是下载下来之后本地引入。

    下面是你需要的资源：

    /* cyrillic-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/an78_18DAUCSU6a4qacRuA.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/4NN7UQ_VsRBn7NDD9HKUPw.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/ye-fuRt_0mKrPeIp6Mwa8A.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/VF6T-UwCT6WyIiUKP6AykQ.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* hebrew */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/X3cUdzInOvbZ6zhcyjPc3w.woff2) format('woff2');
      unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    /* vietnamese */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/eSHy7hCA8QR4qTF-59v60g.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/V41d6938Z8eBLYL302F8Ig.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 400;
      src: local('Arimo'), url(https://fonts.gstatic.com/s/arimo/v9/HNu4Nzh6q8Es60EMNZhs9w.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    /* cyrillic-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/ar6XjGD_YvbpY9XD5YxKTBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/XzFO_hPcAZmADxw_2htokBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/Tq4Zh2K0uru54pu6hyua9BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/gRIQMcBGUlcKSvTGaO9yHBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* hebrew */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/Jg7MGeIJdVGhHqsyezM8VRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    /* vietnamese */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/u0Tw4Txbkc9Av4uzN1j1aBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/XCmwOdi6K62tkWaszbVGURTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Arimo';
      font-style: normal;
      font-weight: 700;
      src: local('Arimo Bold'), local('Arimo-Bold'), url(https://fonts.gstatic.com/s/arimo/v9/27rE5lMk9EHpLbxiIuGd0PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    /* cyrillic-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/-lqiBwxkYHykb59Lvn7rk_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }
    /* cyrillic */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/tvCMF1Qlf0MEvcc7JEzrhfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/aKQL0kir7sjNM0_YzHc9yvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/c6Ldt38oFMowvdIZIi9CaPY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }
    /* hebrew */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/awI6zBWVPE21rQLtkVDZpfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    /* vietnamese */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/Phj51JGRBuPcxq7i7-qcHPY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/-CSRdP_Aes2aBSIDGwIm6vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Arimo';
      font-style: italic;
      font-weight: 400;
      src: local('Arimo Italic'), local('Arimo-Italic'), url(https://fonts.gstatic.com/s/arimo/v9/GYkAnzJvKnl5kOgLY6RO-w.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }

    你可以复制上面的代码，然后保存为.css文件。



    首先，你可以把它保存到本地，然后命名一个文件，在引入到项目中。

    或者你可以安装插件，这个方法是我无意中改了一下插件的设置项，不过居然成功了。

    我安装的这三个关键插件：

    Googleapis to useso （将完美替换后台中原有的Google资源库xxx.GoogleAPIs.com到xxx.useso.com）  

    说明一下：我之前改Google资源库的代码跟安装这个插件应该是同一个道理的。不过我在改代码之前把它停用了，所以造成了我改来改去都没有效果的局面。

    WP Acceleration for China（替换Google CDN文件、Gravatar头像链接，加快WordPress打开速度）

    youpzt-optimizer（WordPress网站优化工具）

    我把上述插件的加速设置全部换成中科大了，然后网页打开速度就正常了。不知道能持续多久，然后在网页中知道360公共库CDN服务器貌似挂了，所以才变成这个样子的。



    将它保存到本地，命名一个.css文件，然后再引入项目中。

    我觉得网站上需要使用的资源还是尽量少用第三方cdn吧，一旦不稳定的时候就悲剧了，最后down到自己服务器上去。

    扩展阅读：免费下载ttf字体库 ... css font-family ... aa字体库手写免费下载 ... cad字体allinonebig下载 ... 免费字体永久免费下载 ... 免费字体包下载ttf ... 字体css代码 ... css字体family ... aa字库官网aa字体下载免费 ...

    本站交流只代表网友个人观点，与本站立场无关
    欢迎反馈与建议，请联系电邮
    2024© 车视网