标签: octicons

我一直在制作自己的webfont作为网页设计师仓库和内部的起点文章.

我知道不同的引擎以不同的方式呈现字体,但我遇到的问题是firefox呈现的字体高于chrome - 在我显示字体的大小这是非常明显的(3或4像素 - 按钮上的意思是'完全错位).

我还引用了Github的octicon文档 - 在查看octicons如何比较浏览器时,它们看起来很棒!就我所见,没有明显的差异.他们是如何做到这一点的？

我正在使用inkscape并尝试了几个不同的svg启动器模板.安装程序Set width: 1024已经尝试过各种尺寸的图标,没有不同的结果.即512pt平方并在基线下方对齐.

我的问题是,在创建webfont以获得字体的浏览器呈现之间的最小差异时,我需要遵循哪些规则？

我正在使用角度2,bootstrap 4创建一个应用程序,我发现glyphicons被丢弃了,所以我决定按照建议使用Octicon,

我做到了 npm install --save octicons

在那之后,我没有站在一个东西.我以为我必须octicons.css只包括但不起作用.

它只包含

.octicon {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
}

使用Octicon的简单步骤是什么？

任何人都可以解释如何实现页面左上角或底部中心的小octocat徽标,为什么？

我只能看到这个标记:

<span class="mega-icon mega-icon-blacktocat"></span>

这个CSS:

.mega-icon-blacktocat:before {
    content: "?";
}

.mega-icon {
font-family: 'Octicons Regular';
}

我看不到那里的图片,所以我猜他们正在使用这个字体.但是为什么会出现那种奇怪的角色,为什么它会在风格而不是HTML中？

有没有推荐的方法让Icon Fonts(eq.FontAwesome/Octicons)流入Shadow DOM？

目前,当我想在自定义元素的Shadow DOM中使用图标时,我必须在Shadow DOM中包含ociticons.css内联文件的部分内容:

#shadowroot
<style>
    .octicon, .mega-octicon {
      font: normal normal normal 16px/1 octicons;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mega-octicon { font-size: 32px; }
    .octicon-search:before { content: '\f02e'} /* ? */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

(显然,@font-face它会渗入Shadow DOM.)

main当无效/不必要时，如何告诉webpack忽略package.json 的属性？

这是一个示例：GitHub的octicons包具有main的readme.md：

{
  "name": "octicons",
  "version": "3.5.0",
  "description": "GitHub's icon font",
  "main": "README.md",  <-------------------------------------
  "repository": {
    "type": "git",
    "url": "https://github.com/github/octicons.git"
  },
  ...
}

https://github.com/github/octicons/blob/master/package.json#L5

导致此错误：

ERROR in ./~/octicons/README.md
Module parse failed: C:\repos\foo\node_modules\octicons\README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp.raise (C:\repos\foo\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.getTokenFromCode (C:\repos\foo\node_modules\acorn\dist\acorn.js:2813:8)
    at Parser.pp.readToken (C:\repos\foo\node_modules\acorn\dist\acorn.js:2508:15)
    at Parser.pp.nextToken (C:\repos\foo\node_modules\acorn\dist\acorn.js:2500:71)
    at Parser.parse (C:\repos\foo\node_modules\acorn\dist\acorn.js:1615:10)
    at Object.parse (C:\repos\foo\node_modules\acorn\dist\acorn.js:882:44)
    at Parser.parse (C:\repos\foo\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\repos\foo\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild …

我想构建一个由 CDN 提供商加速的服务器，为我的其他网站提供静态文件。我决定使用https://www.funfun.org.cn，然后例如https://www.funfun.org.cn/libs/font-awesome.min.css和https://www.funfun.org .cn/libs/octicons.min.css应该可以被其他网站使用。

但是，当我通过本地主机中的网站测试此服务器时，我看到以下错误：

例如，

从源“ https://localhost:3000 ”访问“ https://www.funfun.org.cn/libs/octicons.woff ”上的字体已被 CORS 策略阻止：无“Access-Control-Allow-Origin” ' 标头存在于所请求的资源上。因此，不允许访问来源“ https://localhost:3000 ”。

https://www.funfun.org.cn/fonts/fontawesome-webfont.woff2?v=4.4.0其他错误与和类似https://www.funfun.org.cn/libs/octicons.ttf，等等。

在我的网站中，上面的文件没有直接调用，我只有以下两行关于字体的内容，它们必须调用.ttf和.woff2等。

<link rel="stylesheet" href="https://www.funfun.org.cn/libs/font-awesome.min.css"> 
<link rel="stylesheet" href="https://www.funfun.org.cn/libs/octicons.min.css">

那么，有谁知道我可以做些什么来修复这些错误？

PS：我的nginx配置文件如下，所有文件都在 和/var/www/html/libs/下/var/www/html/fonts/。

server {
    listen 443 ssl;

    ssl_certificate /etc/nginx/cert/1530490648293.pem;
    ssl_certificate_key /etc/nginx/cert/1530490648293.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;

    root /var/www/html;

    server_name funfun.org.cn www.funfun.org.cn;

    location / …