Есть ли способ добавить несколько файлов к методу fontFace в office-ui-fabri c -react? - PullRequest
Новая
       10

Есть ли способ добавить несколько файлов к методу fontFace в office-ui-fabri c -react?

1 голос
/ 05 мая 2020
• 1000 
import { loadTheme, IFontFace, fontFace } from 'office-ui-fabric-react';
[...]
let avantGarde: IFontFace = {
      fontFamily: "ITC Avant Garde",
      src: `url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bk.woff) format('woff'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bk.svg#ITCAvantGardeStd-Bk) format('svg'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bk.eot') format('embedded-opentype'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bk.ttf') format('truetype')`
    };
    let avantGardeMd: IFontFace = {
      fontFamily: "ITC Avant Garde",
      src: `url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Md.woff) format('woff'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Md.svg#ITCAvantGardeStd-Md) format('svg'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Md.eot') format('embedded-opentype'),
url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Md.ttf') format('truetype')`,
      fontWeight: 600
    };
    let avantGardeBold: IFontFace = {
      fontFamily: "ITC Avant Garde",
      src: `url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bold.woff) format('woff'),
      url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bold.svg#ITCAvantGardeStd-Bold) format('svg'),
      url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bold.eot') format('embedded-opentype'),
      url(https://[employer].sharepoint.com/sites/Settings/Style%20Library/Brand/Fonts/ITCAvantGardeStd-Bold.ttf') format('truetype')`,
      fontWeight: 800
    };
    fontFace(avantGarde);
    fontFace(avantGardeMd);
    fontFace(avantGardeBold);
    loadTheme({
      palette: {
        themePrimary: '#009add',
        themeLighterAlt: '#f4fbfe',
        themeLighter: '#ccebf8',
        themeLight: '#99d7f1',
        themeTertiary: '#66c2eb',
        themeSecondary: '#33aee4',
        themeDarkAlt: '#009add',
        themeDark: '#009add',
        themeDarker: '#005486',
        neutralLighterAlt: '#f8f8f8',
        neutralLighter: '#f4f4f4',
        neutralLight: '#eaeaea',
        neutralQuaternaryAlt: '#dadada',
        neutralQuaternary: '#d0d0d0',
        neutralTertiaryAlt: '#c8c8c8',
        neutralTertiary: '#c2c2c2',
        neutralSecondary: '#858585',
        neutralPrimaryAlt: '#4b4b4b',
        neutralPrimary: '#333333',
        neutralDark: '#272727',
        black: '#1d1d1d',
        white: '#ffffff'
      },

      defaultFontStyle: { fontFamily: 'ITC Avant Garde, Century Gothic', fontWeight: 400 },
      fonts: {
        small: {
          fontSize: '12px'
        },
        medium: {
          fontSize: '14px'
        },
        large: {
          fontSize: '20px',
          fontWeight: 600
        },
        xLarge: {
          fontSize: '22px',
          fontWeight: 600
        }
      }

    });
[...]

Это то, что я сделал, пытаясь понять, как это работает, и это действительно работает для большинства из них. Я не нашел в вики учебника, как правильно это делать, если кто-нибудь знает, правильно ли то, что я делаю, а если нет, дайте мне знать, как лучше.

И если кто-нибудь находит это полезным, а затем используйте его по своему усмотрению.

Заранее спасибо!

...