Bank Nue 글꼴 텍스트에 대한 React 구성 요소

대상: 특히 더 큰 크기를 위해 멀티 컬러 디스플레이 글꼴로 디자인된 Bank Nue 글꼴을 보여주는 재미있는 작은 구성 요소입니다. 컴포넌트는 두 가지 스타일을 중첩하여 위의 그림과 같이 주어진 텍스트를 표시합니다.

Bank Nue Font 페이지 내용: 이 글꼴은 두 가지 스타일로 제공되며, 조합하고 레이어링하여 역동적이고 눈에 띄는 모양을 만들 수 있습니다.

사용: React, typescript 및 styled-components.

React 앱에서 다음과 같이 파일을 생성(또는 추가)합니다.

STEP 1. 위의 Bank Nue Font 페이지에서 다음 파일을 "src/fonts"폴더에 다운로드합니다.

banknue-lined-webfont.woff

banknue-lined-webfont.woff2

banknue-sectioned-webfont.woff

banknue-sectioned-webfont.woff2

2단계. "src/index.css"에 추가:

@font-face {
  font-family: 'banknuelined';
  src: url('./fonts/banknue-lined-webfont.woff2') format('woff2'),
       url('./fonts/banknue-lined-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'banknuesectioned';
  src: url('./fonts/banknue-sectioned-webfont.woff2') format('woff2'),
       url('./fonts/banknue-sectioned-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

3단계. 새로운 컴포넌트 "src/components/BankNueFontText.tsx":

import styled from "styled-components";

type StyleProps = {
  size: 1 | 2 | 3 | 4 | 5 | 6;
};

const Container = styled.div<StyleProps>`
  position: relative;
  font-size: ${({ size }) => size * 30}px;
`;

const Stripes = styled.div`
  font-family: banknuelined;
`;

const Shadow = styled.div`
  position: absolute;
  font-family: banknuesectioned;
  mix-blend-mode: multiply;
  /* mix-blend-mode: luminosity; */
`;

const ShadowBlue = styled(Shadow)<StyleProps>`
  color: #00cef1;
  top: ${({ size }) => size}px;
`;

const ShadowRed = styled(Shadow)<StyleProps>`
  color: #fa0007;
  top: ${({ size }) => size * 2}px;
  left: -${({ size }) => size}px;
`;

type Props = {
  size?: 1 | 2 | 3 | 4 | 5 | 6;
  text: string;
};

// See: https://dafontfile.com/bank-nue-font/
const BankNueFontText = ({ size = 3, text }: Props) => {
  return (
    <Container size={size}>
      <Stripes>{text}</Stripes>
      <ShadowBlue size={size}>{text}</ShadowBlue>
      <ShadowRed size={size}>{text}</ShadowRed>
    </Container>
  );
};

export default BankNueFontText;

4단계. 구성 요소 또는 페이지에 다음을 추가합니다.

const text = "bank";
...
return (
...
  <BankNueFontText size={4} text={text} />
...);

제안/질문을 환영합니다.