Webkit Support

Author: zzunipark

src/Pages/AboutusPage/style.js

@@ -1,4 +1,5 @@
 import styled, { keyframes, css } from "styled-components";
+import { bodyText } from "../../Styles/commonStyles";
 import AboutusTitleJpg from "../../Assets/images/jpg/aboutus-title.jpg";
 
 const fadeIn = keyframes`
@@ -43,8 +44,8 @@ export const MainContainerTitle = styled.div`
 `;
 
 export const MainContainerSubTitle = styled.div`
+	${bodyText}
 	font-size: 26px;
-	font-weight: 500;
 	color: #ededed;
 	margin-top: 5px;
 	text-align: center;
@@ -134,8 +135,8 @@ export const GreetingTitle = styled.div`
 `;
 
 export const GreetingDesc = styled.div`
+	${bodyText}
 	font-size: 18px;
-	font-weight: 400;
 	color: #171717;
 	line-height: 1.6;
 	margin-top: 20px;

src/Pages/BlogPage/style.js

@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { bodyText } from "../../Styles/commonStyles";
 
 const fadeIn = keyframes`
   from {
@@ -114,9 +115,9 @@ export const ButtonContainer = styled.div`
 `;
 
 export const Button = styled.button`
+	${bodyText}
 	padding: 0.75rem 1.5rem;
 	font-size: 1rem;
-	font-weight: 500;
 	border-radius: 6px;
 	cursor: pointer;
 	transition: all 0.2s ease;

src/Pages/MainPage/style.js

@@ -1,4 +1,5 @@
 import styled, { keyframes, css } from "styled-components";
+import { bodyText } from "../../Styles/commonStyles";
 import Image1Jpg from "../../Assets/images/jpg/image1.jpg";
 import Image2Jpg from "../../Assets/images/jpg/image2.jpg";
 
@@ -153,8 +154,8 @@ export const SubContainer1SectionDescription = styled.div`
 		css`
 			animation: ${fadeIn} 1s ease-out forwards;
 		`}
+	${bodyText}
 	font-size: 22px;
-	font-weight: 500;
 	color: #171717;
 	@media (max-width: 1920px) {
 		font-size: 20px;
@@ -330,8 +331,8 @@ export const SubContainer2SectionDescription = styled.div`
 		css`
 			animation: ${fadeIn} 1s ease-out forwards;
 		`}
+	${bodyText}
 	font-size: 22px;
-	font-weight: 500;
 	color: #fff;
 	text-align: center;
 	margin-top: 20px;
@@ -385,8 +386,8 @@ export const StatsItem = styled.div`
 `;
 
 export const StatsItemDescription = styled.div`
+	${bodyText}
 	font-size: 24px;
-	font-weight: 500;
 	color: #171717;
 
 	@media (max-width: 1450px) {

src/Pages/StatusPage/style.js

@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import { bodyText } from "../../Styles/commonStyles";
 import StatusTitleJpg from "../../Assets/images/jpg/status-title.jpg";
 
 const fadeIn = keyframes`
@@ -39,8 +40,8 @@ export const MainContainerTitle = styled.div`
 `;
 
 export const MainContainerSubTitle = styled.div`
+	${bodyText}
 	font-size: 26px;
-	font-weight: 500;
 	color: #fff;
 	margin-top: 5px;
 	text-align: center;

src/Styles/GlobalStyle.jsx

@@ -86,7 +86,17 @@ const GlobalStyle = createGlobalStyle`
   margin: 0;
   list-style: none;
   text-decoration: none;
-  font-family: 'Pretendard', sans-serif;
+  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+}
+
+/* iOS에서의 폰트 렌더링 최적화 */
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+  * {
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }
 `;
 

src/Styles/commonStyles.js

@@ -1,4 +1,4 @@
-import styled, { keyframes, css } from "styled-components";
+import { keyframes, css } from "styled-components";
 
 // 공통 애니메이션
 export const fadeIn = keyframes`
@@ -108,7 +108,7 @@ export const sectionTitle = css`
 
 export const sectionSubtitle = css`
 	font-size: 26px;
-	font-weight: 500;
+	font-weight: 400;
 	color: #333;
 	text-align: center;
 	margin-bottom: 1rem;
@@ -120,3 +120,27 @@ export const sectionSubtitle = css`
 		font-size: 18px;
 	}
 `;
+
+// iOS에서 본문 텍스트를 위한 가벼운 폰트 스타일
+export const lightText = css`
+	font-weight: 300;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	
+	/* iOS Safari에서 폰트를 더 가볍게 보이도록 */
+	@supports (-webkit-appearance: none) {
+		font-weight: 200;
+	}
+`;
+
+// iOS에서 일반 본문 텍스트를 위한 스타일
+export const bodyText = css`
+	font-weight: 400;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	
+	/* iOS Safari에서 폰트를 더 가볍게 보이도록 */
+	@supports (-webkit-appearance: none) {
+		font-weight: 300;
+	}
+`;