이미지 교체 기술에 대해 정직해야 할 때입니다-CSS 튜토리얼-php.cn

이미지 교체 기술에 대해 정직해야 할 때입니다 키 테이크 아웃

접근성을 유지하면서 예술적 형태로 텍스트 콘텐츠를 전달하는 데 인기있는 이미지 교체 기술은 이제 사용자 정의 글꼴 및 강력한 CSS 도구와 같은 최신 도구의 가용성으로 인해 종종 비판을받습니다. 텍스트 이미지 대신 텍스트를 사용하면 몇 가지 이점이 있습니다. 사용자는 텍스트를 쉽게 조정하고 색상을 변경할 수 있으며 스크린 리더 및 검색 엔진 봇이 액세스 할 수 있으며 우려 사항의 분리를 존중합니다.

. 웹에서 로고 서체를 사용할 수 없거나 CSS로 그래픽 아트 워크를 다시 만들 수없는 경우와 같이 웹 글꼴과 CSS가 원하는 결과를 얻기에 충분하지 않은 경우가 있습니다. 이 경우 그래픽 요소를 사용하는 것이 필요할 수 있습니다.

인라인 SVG는 웹 글꼴과 CSS를 활용할 수 없을 때 웹 페이지에 로고를 포함시키는 좋은 방법입니다. 검색 엔진과 보조 기술, 확장 가능 및 해상도 독립적 인 보조 기술에 액세스 할 수 있으며 추가 HTTP 요청을 표시 할 필요가 없습니다. > 이미지 교체는 최신 CSS, 웹 글꼴 및 벡터 그래픽의 기능으로 인해 더 이상 사용되지 않습니다. 그러나 이미지 교체 기술이 여전히 제한된 응용 프로그램을 찾을 수있는 접근성 고려 사항과 관련된 에지 사례가 여전히 있습니다.

CSS 이미지 교체의 역사에 대한 Sitepoint에서 이전 작품에서 Baljeet Rathi는 여러 이미지 교체 기술을 다루며, 각각은 다음보다 독창적입니다. 이러한 기술은 모두 웹에서 아름답게 예술적인 형태로 텍스트 콘텐츠를 전달하는 동시에 사람과 검색 엔진 모두에 액세스 할 수 있도록하는 방법을 해결하는 데 중점을 두었습니다. 쉽게 구할 수있는 커스텀 글꼴과 강력한 CSS 도구없이 웹 디자인의 세계에서 이러한 목표를 달성하는 것은 꽤 위업이었습니다.

Rathi의 기사에서 큐를 가져 가면서 다음 질문을 해결하기 시작했습니다.

이미지 교체 기술은 매우 인기가있었습니다. 오늘날, 텍스트를 배경 이미지로 바꾸는 이러한 방법은 종종 웹 개발자들 사이에서 나쁜 랩을 얻습니다. 이 기사의 뒷부분의 이유 중 일부를 살펴볼 것입니다. 그러나 이것이 사실이므로 대신 어떤 도구와 모범 사례를 사용할 수 있습니까?

이미지 교체 기술은 과거의 웹 디자인의 유령이거나 이미지 대체 기술이 웹을 추악하게 만드는 것에 대한 두려움없이 오늘날에도 여전히 의미있게 사용될 수 있습니까? 작업에 가장 적합한 도구를 살펴 보는 것으로 시작하겠습니다.

작업에 가장 적합한 도구 : 웹 글꼴 및 CSS

콘텐츠가 텍스트 인 경우 텍스트를 사용하고 텍스트 이미지를 사용하지 마십시오.

오늘날 도구를 사용하면 아름다운 형태로 텍스트 컨텐츠를 전달하기 위해서는 이미지가 거의 필요하지 않습니다. 엄청난 커스텀 웹 글꼴, CSS @font-face 속성에 대한 훌륭한 브라우저 지원 및 Typekit 및 Google 글꼴과 같은 글꼴 스트리밍 서비스에 대한 훌륭한 브라우저 지원에 쉽게 액세스 할 수 있습니다. 모두 브랜드를 전달하고 감정을 전달하며 웹에서 멋진 타이포그래피에 영향을 미칩니다 최신 CSS의 기능은 투명도 수준을 제어하고, 텍스트 그림자, 블렌드 모드 및 텍스트에 애니메이션을 추가하는 것을 산들 바람으로 만듭니다. 아래는 웹 글꼴 및 CSS로 할 수있는 일의 예일뿐입니다. Smart Designs 웹 사이트는 이미지없이 훌륭한 타이포그래피를 표시하고 웹 글꼴 및 CSS 만 표시합니다. 텍스트 이미지 대신 텍스트를 사용하는 주요 이점은 다음과 같습니다.

사용자는 텍스트를 쉽게 조정하고 색상을 변경하여 요구 사항을 충족시킬 수 있습니다.

스크린 리더는 텍스트에 액세스 할 수 있으며 검색 엔진 봇은 크롤링하고 색인 할 수 있습니다. 그것은 의미 적으로 올바른 접근 방식이며 우려의 분리를 존중하며, 관련성은 웹 컨텐츠 접근성 가이드 라인 (WCAG) 성공 기준을 충족하기위한 W3C 권장 사항에 의해 옹호됩니다.

. 사용자 정의 글꼴을 사용하는 경우 CSS 글꼴 스택에서 웹 안전 글꼴을 쉽게 제공 할 수 있습니다.

그러나 많은 사람들이 알고 있듯이이 접근법은 모든 상황에서 효과가 없습니다. 그래서… <.> 웹 글꼴과 CSS가 항상 작업에 달려 있지 않으면 어떻게됩니까? 웹 글꼴과 CSS가 결과를 달성하기에 충분하지 않은 상황이 있습니다. 웹 사이트의 로고가 요점에 있습니다.

로고는 브랜드에 필수적이므로 브랜드 아이덴티티를 타협하지 않고 로고를 약간 수정할 수 없음을 의미합니다. 웹 글꼴과 CSS를 사용하여 로고를 정확하게 재현 할 수없는 경우가있을 수 있습니다. 아마도 로고의 서체는 웹에서 쉽게 사용할 수 없거나 그래픽 아트 워크를 CSS로 충실하게 재현 할 수 없습니다. 그래픽 요소를 사용하는 것은 갈 수있는 것 같습니다. 그러나 사용자가 웹 사이트에 그래픽 요소가 표시되기를 원하지만 화면 리더와 봇도 로고가 나타내는 브랜드 이름에 액세스 할 수 있기를 원합니다.