如何在 Confluence 插件中引用字体文件？

Question

我想要一个文本使用特定的字体样式，我将其 CSS class 指定为“.title”，相关代码都在 Confluence 中的 CSS 文件中声明插件如下：

@font-face {
    font-family: 'Myriad Pro';
    font-style: normal;
    src: url(MyriadPro-Regular.otf) format("opentype"), local("Consolas");
}

.title {
    font-family: Myriad Pro;
}

但是插件找不到字体文件。字体文件与 CSS 文件位于同一文件夹中。 字体文件的 url 应该是什么？

Answer 1

对于 Confluence 服务器

如果您希望 Consolas 之类的东西在 Confluence 中工作，您需要确保所有浏览器都安装了该字体，或者使用类似的网络字体，例如 Inconsolata.

如果您对每个人都安装了正确的字体感到满意，请将以下内容添加到

Confluence 管理员 |自定义 HTML |在 HEAD 的末尾:

<style> body { font-family: Consolas, monaco, monospace; } </style>

如果您决定使用网络字体，请将以下内容添加到

Confluence 管理员 |自定义 HTML |在 HEAD 的末尾:

<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style> body { font-family: Inconsolata, Consolas, monaco, monospace; } </style>

假设您要使用 Consolas font stack - 如果 Consolas/Inconsolata 字体加载失败，将使用类似的字体。

对于合流云

您无法编辑 CSS 或向页面添加标记，因此这是不可能的。

Answer 2

对于 Confluence Server，基本插件可以这样定义：

一些文件结构如下：

/your-plugin-name/
/your-plugin-name/main
/your-plugin-name/main/java
/your-plugin-name/main/resources
/your-plugin-name/main/resources/atlassian-plugin.xml
/your-plugin-name/main/resources/css/custom.css
/your-plugin-name/main/resources/fonts/MyriadPro-Regular.otf

还有一个 atlassian-plugin.xml 这样的：

<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
  <plugin-info>
    <description>${project.description}</description>
    <version>${project.version}</version>
    <vendor name="${project.organization.name}" url="${project.organization.url}" />
  </plugin-info>

  <web-resource key="your-web-resources" name="Web Resources">

    <resource name="style.css"  type="download" location="css/custom.css" />
    <resource name="myriad.otf" type="download" location="fonts/MyriadPro-Regular.otf" />

    <!-- Adding main & global contexts means that these web resources will always be loaded. -->
    <context>main</context>
    <context>global</context>

  </web-resource>

</atlassian-plugin>

您的 CSS 和字体文件将在整个 Confluence 中全局可用。

您的 CSS 文件将自动加载并命名为类似 /downloads/gfdsgfdsgf/fdsgfd/me.davidsimpson.confluence.plugins.example:your-web-resources/style.css 的名称，其中 gfdsgfdsgf/fdsgfd 是一些随机字符。

您应该能够引用您的字体文件，就像它们与 css 文件位于同一目录中一样：

@font-face {
  font-family: 'Myriad Pro';
  font-style: normal;
  src: url(myriad.otf) format("opentype"), local("Consolas");
}

.title {
  font-family: Myriad Pro;
}

..但请注意，它们有新名称 - style.css & myriad.otf.

如何在 Confluence 插件中引用字体文件？

How to refer to font file inside a Confluence plugin?

fonts

plugins

confluence

对于 Confluence 服务器

对于合流云