Webkit Support

Author: zzunipark

src/Pages/AboutusPage/style.js

@@ -1,5 +1,5 @@
 import styled, { keyframes, css } from "styled-components";
-import { bodyText } from "../../Styles/commonStyles";
+import { bodyText, lightText } from "../../Styles/commonStyles";
 import AboutusTitleJpg from "../../Assets/images/jpg/aboutus-title.jpg";
 
 const fadeIn = keyframes`
@@ -135,7 +135,7 @@ export const GreetingTitle = styled.div`
 `;
 
 export const GreetingDesc = styled.div`
-	${bodyText}
+	${lightText}
 	font-size: 18px;
 	color: #171717;
 	line-height: 1.6;

src/Styles/GlobalStyle.jsx

@@ -81,6 +81,36 @@ const GlobalStyle = createGlobalStyle`
     url('../../public/fonts/woff2/Pretendard-Thin.woff2') format('woff2'),
     url('../../public/fonts/woff/Pretendard-Thin.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 200;
+  font-display: swap;
+  src: local('Pretendard ExtraLight'),
+    url('../../public/fonts/woff2/Pretendard-ExtraLight.woff2') format('woff2'),
+    url('../../public/fonts/woff/Pretendard-ExtraLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  font-weight: 300;
+  font-display: swap;
+  src: local('Pretendard Light'),
+    url('../../public/fonts/woff2/Pretendard-Light.woff2') format('woff2'),
+    url('../../public/fonts/woff/Pretendard-Light.woff') format('woff');
+}
+
+/* iOS Safari에서 더 가벼운 기본 폰트 사용 */
+@supports (-webkit-appearance: none) {
+  @font-face {
+    font-family: 'PretendardLight';
+    font-weight: normal;
+    font-display: swap;
+    src: local('Pretendard Light'),
+      url('../../public/fonts/woff2/Pretendard-Light.woff2') format('woff2'),
+      url('../../public/fonts/woff/Pretendard-Light.woff') format('woff');
+  }
+}
 * {
   padding: 0;
   margin: 0;
@@ -90,6 +120,7 @@ const GlobalStyle = createGlobalStyle`
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-synthesis: none;
+  text-rendering: optimizeLegibility;
 }
 
 /* iOS에서의 폰트 렌더링 최적화 */
@@ -98,6 +129,24 @@ const GlobalStyle = createGlobalStyle`
     -webkit-font-smoothing: subpixel-antialiased;
   }
 }
+
+/* iOS Safari 전용 폰트 최적화 */
+@supports (-webkit-appearance: none) {
+  * {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.1px transparent;
+    font-family: 'PretendardLight', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+  }
+}
+
+/* iPhone에서 Pretendard 폰트가 두껍게 보이는 문제 해결 */
+@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+  * {
+    font-family: 'PretendardLight', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-text-stroke: 0.05px transparent;
+  }
+}
 `;
 
 export default GlobalStyle;

src/Styles/commonStyles.js

@@ -123,24 +123,45 @@ export const sectionSubtitle = css`
 
 // iOS에서 본문 텍스트를 위한 가벼운 폰트 스타일
 export const lightText = css`
-	font-weight: 300;
+	font-weight: 200;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	
 	/* iOS Safari에서 폰트를 더 가볍게 보이도록 */
 	@supports (-webkit-appearance: none) {
-		font-weight: 200;
+		font-weight: 100;
+		-webkit-font-smoothing: subpixel-antialiased;
+	}
+	
+	/* iOS 특정 미디어 쿼리 */
+	@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+		font-weight: 100;
+		-webkit-font-smoothing: subpixel-antialiased;
+		text-rendering: optimizeLegibility;
 	}
 `;
 
 // iOS에서 일반 본문 텍스트를 위한 스타일
 export const bodyText = css`
-	font-weight: 400;
+	font-weight: 300;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 	
 	/* iOS Safari에서 폰트를 더 가볍게 보이도록 */
 	@supports (-webkit-appearance: none) {
-		font-weight: 300;
+		font-weight: 200;
+		-webkit-font-smoothing: subpixel-antialiased;
+	}
+	
+	/* iOS 특정 미디어 쿼리 */
+	@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+		font-weight: 200;
+		-webkit-font-smoothing: subpixel-antialiased;
+	}
+	
+	/* iPhone에서 더 가벼운 폰트 */
+	@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+		font-weight: 200;
 	}
 `;