동적 이미지 대체 실용 기법 및 도구
웹 디자인의 경우 디자인의 독창성은 지원되는 웹 폰트의 제한된 선택으로 만회해서는 안됩니다. 웹 안전 글꼴. 디자이너는 제목과 내용에 선호하는 글꼴을 자유롭게 사용할 수 있어야합니다..
2005 년에는 동적 이미지 교체가 인기있는 기술로 불려졌습니다. 확장 가능한 Inman Flash Replacement (sIFR). 에 의해 개발 된 숀 인 만, sIFR은 Javascript와 Adobe Flash를 이용하여 웹 디자이너가 웹 사이트에서 좋아하는 글꼴을 사용하고 해당 글꼴이없는 사람들도 계속 볼 수 있도록합니다. 그리고 웹이 계속 발전함에 따라 오늘날 우리는 다양한 기술을 사용하는 대체 솔루션을 보유하고 있습니다..
더 이상 고민하지 않고, 동적 이미지 대체를 달성하는 기술.
일반적으로 사용되는 기술
다음은 동적 이미지 대체를 위해 가장 일반적으로 수행되는 기술 중 일부입니다..
확장 가능한 Inman Flash Replacement (sIFR)
sIFR 웹 사이트에 맞춤 글꼴을 포함시키는 가장 인기있는 방법 중 하나입니다. Javascript 및 Flash를 사용하여 웹 사이트에 대한 사용자 정의 서체를 생성하고 변환 된 서체를 선택할 수있게합니다. 그 외에도 변환 된 서체는 소스 코드에 텍스트로 남아 있으므로 검색 엔진은 여전히 그들을 크롤링 할 수 있습니다.
sIFR 2 (권장)은 현재 안정적인 릴리스이지만, sIFR을 구현하려는 경우에는 siFR 3 베타 버전도 다운로드 할 수 있습니다. 그것은 약간 버그 일지 모르지만 적어도 글꼴 확장 문제를 해결합니다. sIFR 2.
편리한 sIFR을위한 도구 :
- sIFRvaultsIFRvault는 다운로드 할 수있는 sIFR 글꼴 저장소입니다..
- sIFR 생성기몇 번의 마우스 클릭만으로 sIFR .swf 파일을 만들 수있는 온라인 도구. 변환, 미리보기 및 다운로드하려는 글꼴의 TTF 글꼴을 업로드하기 만하면됩니다..
- 글꼴을 sIFR로 변환하십시오..TTF 글꼴을 업로드하면이 웹 사이트에서 sIFR 플래시 파일로 변환됩니다..
sIFR 라이트
원본 sIFR은 22k이므로 데이브 보다 객체 지향적 인 접근 방식을 사용하여 그것을 재 작성하기로 결정했다. 3.7 배에서 3 배 작은.
PHP + CSS 동적 텍스트 대체 (P + C DTR)
이름에서 알 수 있듯이이 스크립트는 PHP 및 CSS를 사용하는 텍스트 대체 방법으로 스튜 워드 로젠 버거. 또한 이전 버전의 향상된 기능입니다. R. Marie Cox 텍스트 배치 및 내부 태그를 지원하지 않습니다. P + C DTR에 대한 또 다른 멋진 점은 CSS 태그로 이미지 텍스트를 맞춤 설정할 수 있다는 것입니다..
typeface.js
무엇이 만드는가? typeface.js 특별한 점은 Javascript 만 사용하여 사용자 정의 글꼴을 포함하고 스타일을 HTML 및 CSS로 추가로 사용자 정의 할 수 있으므로 플래시가 필요하지 않습니다. 오픈 소스이며 요즘 사용하고있는 대부분의 브라우저를 지원합니다. Safari, Firefox, IE (6 이상).
개인적으로 typeface.js에 대한 실험을 한 후에는 개선 할 여지가있을 수 있다고 생각합니다. 첫째, 글꼴은 브라우저마다 약간 다르게 렌더링되는 경향이 있습니다. typeface.js를 사용하는 경우 Firefox에서 보이는 내용이 Safari에 표시되는 것으로 가정하기 전에 브라우저 간 검사를 수행하는 것이 좋습니다. 또한 텍스트는 typeface.js로 선택할 수 없습니다..
typeface.js의 사용자 정의 글꼴은 컴파일되지 않습니다. 사용자가 글꼴을 다운로드 할 수 있음을 의미합니다. 저작권 문제로 이어질 수 있습니다. 사용중인 글꼴이 재배포를 위해 괜찮은지 확인하기 위해 철저히 조사한 것이 좋습니다..
쿠폰
플래시 필요 없음, 쿠폰 sIFR에 대한 훌륭한 대안이며 구현이 매우 간단합니다. 먼저 Cufon 생성기를 사용하여 원하는 글꼴을 생성하고 사용자 정의한 다음 소스 코드에 Cufon Javascript를 삽입하고 글꼴을 사용자 정의 할 선택기를 스크립트에 지정합니다.
Cufon의 가장 큰 문제점은 이러한 맞춤 글꼴을 온라인으로 사용하는 법적 문제입니다. Javascript에 내장되어 있기 때문에 소스 코드를 보는 사람은 쉽게 파기 할 수 있습니다. Cufon 사용자 지정 글꼴을 선택할 수 없습니다. 다른 글꼴은 꺼져 있습니다..
안면 성형
또한 ~으로 알려진 Facelift Image Replacement (FLIR), sIFR에 필요한 또 다른 훌륭한 방법입니다. 다른 대안이 sIFR의 플래시 문제에 부딪 히고있는 것처럼 보입니다..
Facelift는 PHP와 PHP의 GD 라이브러리를 사용합니다. 그들은 사용자 정의 글꼴 대체의 기존 문제점을 상속합니다. 텍스트를 선택할 수 없습니다. 그 외에도 우리는 그것이 훌륭하다고 생각합니다..
기타 방법
위의 기술은 더 널리 사용 될 수 있지만 텍스트를 아름다운 사용자 정의 서체로 변환하는 데 다른 방법을 발견했습니다.
유형 선택
TypeSelect typeface.js, jQuery, 캔버스, toDataURL, CSS 배경 속성 및 실제 덮어 쓴 텍스트를 활용하여 웹 사이트에 맞춤 서체를 제공합니다. 텍스트 선택은 Firefox, Safari 및 Chrome에서도 작동하지만 IE에서는 작동하지 않습니다..
Swf 이미지 대체 (swfIR)
swfIR 웹 사이트의 모든 이미지에 다양한 시각 효과를 적용 할 수있는 기능을 제공합니다. 예를 들어, 웹 사이트에 이미지를 추가하면 swfIR이 둥근 테두리를 추가하거나, 위치를 회전하거나, 그림자를 추가합니다.
CSS 이미지 대체를위한 9 가지 기술
이것은 동적 텍스트 대체가 아니지만 크리스 코 이어 텍스트를 이미지로 대체하는 9 가지 CSS 기술을 시연합니다. 각각의 상태를 보여주는 성적표가 있습니다 - 이미지가 켜지거나 꺼지는 경우 CSS가 켜지거나 꺼지는 경우.
글꼴 버너
글꼴 버너 Scalable Inman Flash Replacement (sIFR)를 사용하여 타이틀을 사용자 정의 글꼴로 변경하십시오. 글꼴을 찾아 선택하고 머리 속에 코드를 삽입하면 제목이 즉시 변경됩니다..
WordPress + 동적 이미지 대체
당신이 제목이나 블로그의 내용에 대한 동적 이미지 대체 솔루션을 찾고있는 WordPress 사용자라면 플러그인이있을 가능성이 있습니다. 다음은 우리가 알아야 할 텍스트 대체 플러그인입니다..
sIFR 워드 프레스 플러그인 - WP sIFRWP sIFR WordPress 사이트에서 맞춤 글꼴을 얻는 데 따른 합병증을 없애기 위해 만들어졌습니다. WP sIFR을 사용하면 SWF 글꼴 파일을 플러그인 디렉토리에 업로드 한 다음 설정 패널에서 로그인하고 활성화 한 다음 스타일을 구성하기 만하면됩니다.
Cufon WordPress Plugin - WP-Cufon당신이해야 할 유일한 일은 폰트 파일을 변환하여 플러그인 디렉토리에 업로드하는 것입니다. WordPress의 관리자 메뉴에서 대체 할 개체를 활성화 할 수 있습니다..
Facelift Image Replacment (FLIR) Wordpress PluginFLIR 왜냐하면 자바 스크립트가 가능하다면 워드 프레스는 SEO 친화적이며 브라우저의 이미지 만 렌더링하기 때문입니다. HTML / XHTML 코드는 변경되지 않고 검색 엔진에서 읽을 수있는 머리 태그와 JavaScript가없는 사람이 읽을 수있는 페이지를 남겨 둡니다..
글꼴 버너 제어판그만큼 글꼴 버너 제어판 플러그인을 사용하면 Font Burner 웹 사이트에서 사용할 수있는 1000 개 이상의 무료 글꼴을 WordPress 테마에 쉽게 추가 할 수 있습니다.
