styled.js 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. /* eslint-disable consistent-return */
  2. import { createGlobalStyle, css } from 'styled-components';
  3. export const GlobalStyle = createGlobalStyle`
  4. html, body {
  5. margin: 0;
  6. background-color: #f8f8f8;
  7. height: 100%;
  8. font-size: 14px;
  9. & > div {
  10. height: 100%;
  11. }
  12. }
  13. div {
  14. box-sizing: border-box;
  15. }
  16. ${({ lang }) => {
  17. if (lang === 'zh-tw') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,700&display=swap');`;
  18. if (lang === 'zh-cn') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,400,700&display=swap');`;
  19. if (lang === 'ja') return css`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap');`;
  20. if (lang === 'en') return css`@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');`;
  21. }}
  22. &:lang(en) {
  23. font-family: 'Open Sans', sans-serif;
  24. }
  25. &:lang(zh-tw) {
  26. font-family: 'Noto Sans TC', sans-serif;
  27. }
  28. &:lang(zh-cn) {
  29. font-family: 'Noto Sans SC', sans-serif;
  30. }
  31. &:lang(ja) {
  32. font-family: 'Noto Sans JP', sans-serif;
  33. }
  34. `;
  35. export default GlobalStyle;